Less broad CSS rules for styling ticket #properties table

[Ethan Jucovy <ethan.jucovy@…>]

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+).

[Ethan Jucovy <ethan.jucovy@…>]

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.

[Ethan Jucovy <ethan.jucovy@…>]

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

[Ethan Jucovy <ethan.jucovy@…>]

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.

[Christian Boos]

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.

[Christian Boos]

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

[Ryan J Ollos]

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?

[Peter Suter]

Closely related to #11896.

[Ryan J Ollos]

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.

[Ryan J Ollos]

There will be less risk to apply to trunk.

[Ryan J Ollos]

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

[Ryan J Ollos]

Committed to trunk in [13754].

[Jun Omae]

I noticed a similar issue in trunk. Wiki table in ticket comment in auto preview is rendered as width: 100%. Wiki table usually is rendered as width: auto.

[Ryan J Ollos]

That might be a regression in [13211]. This patch seems to fix the issue.

trac/htdocs/css/ticket.css

@@ -204 +204 @@
 label[for=comment] { float: right }
 
 #propertyform { margin-bottom: 2em; }
-#propertyform table {
+#propertyform table.trac-properties {
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
 }
-#propertyform table td input[type="text"],
-#propertyform table td textarea {
+#propertyform table.trac-properties td input[type="text"],
+#propertyform table.trac-properties td textarea {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;

trac/ticket/templates/ticket.html

@@ -327 +327 @@
             <!--! Comment field -->
             <fieldset>
               <div py:if="authname == 'anonymous'" class="author">
-                <table>
+                <table class="trac-properties">
                   <tr>
                     <th>
                       <label for="author">Your email or username:</label><br />

[Jun Omae]

Replying to rjollos:

That might be a regression in [13211]. This patch seems to fix the issue.

Thanks. That looks good to me. Please push it.

[Ryan J Ollos]

Thanks for the review. Committed to trunk in [13781].