Edgewall Software

Opened 8 years ago

Last modified 5 years ago

#10841 closed defect

Less broad CSS rules for styling ticket #properties table — at Version 11

Reported by: Ethan Jucovy <ethan.jucovy@…> Owned by: Ryan J Ollos
Priority: normal Milestone: 1.1.4
Component: rendering Version:
Severity: normal Keywords:
Cc: Branch:
Release Notes:
API Changes:

On ticket page, CSS selectors descending from #properties table are more precise.

Internal Changes:


I've set up a Trac site that loads a Javascript WYSIWYG editor to edit the ticket description field. The WYSIWYG editor creates a <table> to present a toolbar to the user.

Trac's ticket.css contains rules for #properties table which make the layout of this toolbar table look wrong, because it's a <table> that's a descendent of the <fieldset id="properties">. So, in order to make the WYSIWYG toolbar display properly, I need to track down all the #properties table rules and suppress them with a more specific CSS selector in my own stylesheet.

However, Trac's CSS rule is unnecessarily broad. The only table that the CSS is trying to style is a direct child of the properties fieldset, so using selectors like #properties > table instead of #properties table would have the same effect without accidentally styling other tables that might be inserted within the #properties node. I believe the CSS child selector has been supported in all browsers for a while now (IE7+).

Change History (14)

by Ethan Jucovy <ethan.jucovy@…>, 8 years ago

by Ethan Jucovy <ethan.jucovy@…>, 8 years ago

comment:1 by Ethan Jucovy <ethan.jucovy@…>, 8 years ago

If using the CSS child selector is problematic, the same effect could be achieved by adding a class or ID to the relevant table to make the selector more specific. I'm not sure which approach is considered better, so I've attached two patches.

by Ethan Jucovy <ethan.jucovy@…>, 8 years ago

Use multiple child selectors in each rule (table > tbody > tr etc)

comment:2 by Ethan Jucovy <ethan.jucovy@…>, 8 years ago

Actually neither of my first two patches is sufficient, because of course the inner table's <th>s and <td>s are still caught by the rule. attachment:ticket_css_propertiestable_multiple_child_selectors.diff fixes this by using a lot of child selectors (e.g. #properties > table > tbody > tr > th) which makes the application of the rules sufficiently specific.

comment:3 by Christian Boos, 8 years ago

I didn't look at the specifics of the problem yet, but just seeing your latest patch, I think you should aim for simple and efficient CSS by adding whatever is required in terms of IDs or classes (trac- prefix), rather than trying to cope with the existing structure.

comment:4 by Christian Boos, 7 years ago

Milestone: undecided

All the tickets for {20} from last year have probably been seen multiple times by now, yet are still to be triaged…

comment:5 by Ryan J Ollos, 6 years ago

I took the suggestions from this ticket and prepared the changes in log:rjollos.git:t10841. Ethan, does it solve the issue you were encountering?

comment:6 by Peter Suter, 6 years ago

Closely related to #11896.

comment:7 by Ryan J Ollos, 5 years ago

Milestone: undecided1.0.4
Owner: set to Ryan J Ollos
Status: newassigned

comment:8 by Ryan J Ollos, 5 years ago


comment:9 by Ryan J Ollos, 5 years ago

Tentative plan is to just apply attachment:ticket_css_propertiestable_multiple_child_selectors.diff, since it's similar to the change in [13662] and will get the job done for now. However, I haven't fully tested that patch yet.

Last edited 5 years ago by Ryan J Ollos (previous) (diff)

comment:10 by Ryan J Ollos, 5 years ago


There will be less risk to apply to trunk.

comment:11 by Ryan J Ollos, 5 years ago

API Changes: modified (diff)

Proposed changes in log:rjollos.git:t10841.2.

Note: See TracTickets for help on using tickets.