Opened 8 years ago

Closed 8 years ago

#13917 closed defect (fixed)

Bad interplay between Button and Toolbar CSS

Reported by: Rob Retchless Owned by: bill
Priority: high Milestone: 1.7.1
Component: Dijit Version: 1.6.1
Keywords: Cc:
Blocked By: Blocking:

Description

Currently, the dijit.form.Button CSS file must be included before the dijit.Toolbar CSS file, or else the toolbar styles are messed up. Toolbar.css overrides some styles from Button.css to achieve the toolbar look. If the CSS files are included in the wrong order, the toolbar overrides are not applied properly.

The rules in Toolbar.css should be made slightly more specific to avoid this issue. There is no code dependency between Button and Toolbar, so there's no reason there should be a CSS order requirement.

Attachments (2)

Toolbar-correctorder.html (966 bytes) - added by Rob Retchless 8 years ago.
Button CSS loaded before Toolbar CSS (correct styling)
Toolbar-incorrectorder.html (968 bytes) - added by Rob Retchless 8 years ago.
Button CSS loaded after Toolbar CSS (incorrect styling)

Download all attachments as: .zip

Change History (11)

comment:1 Changed 8 years ago by Douglas Hays

Owner: set to bill

comment:2 Changed 8 years ago by bill

Can you be more specific (no pun intended)? First of all, are you talking about claro? All the rules in claro's Toolbar.less have the .dijitToolbar in their selectors, so presumably they are already more specific.

comment:3 Changed 8 years ago by bill

Resolution: worksforme
Status: newclosed

Closing due to lack of response.

Changed 8 years ago by Rob Retchless

Attachment: Toolbar-correctorder.html added

Button CSS loaded before Toolbar CSS (correct styling)

Changed 8 years ago by Rob Retchless

Attachment: Toolbar-incorrectorder.html added

Button CSS loaded after Toolbar CSS (incorrect styling)

comment:4 Changed 8 years ago by Rob Retchless

Resolution: worksforme
Status: closedreopened

I've attached test cases that reproduce the issue.

comment:5 in reply to:  description Changed 8 years ago by bill

OK thanks. Is there some issue that you are having that's causing the files to be loaded in the reverse order from claro.css? Or you just don't like that they need to be included in a certain order?

comment:6 Changed 8 years ago by Rob Retchless

In IBM Jazz, we don't use claro.css. We bind each widget's CSS file(s) to the widget's module id using an eclipse extension point, and use a custom loader to dynamically load a given widget and all of its dependencies (JS and CSS) in a single request (well, 2 request - one for JS, one for CSS). The order of the CSS is based on the dependency graph of the JS requires. Since dijit.Toolbar and dijit.form.Button do not depend on each other, the loading order of their CSS can change depending on the order of the requires. For now, I'm force loading the Button CSS before the Toolbar CSS whenever the Toolbar is required (a hack really, and will lead to extra CSS being loaded for cases where the toolbar is being used without the dijit.form.Button), so it would be great to see this fragility fixed in dijit.

comment:7 Changed 8 years ago by bill

Milestone: tbd1.7.1
Status: reopenedassigned

OK, makes sense. At some point that may be the case for dijit itself too (ie, loading CSS on demand). I'll check in a fixl

comment:8 Changed 8 years ago by bill

In [27017]:

Fix specificity of selectors in Toolbar.css to override Button.css even if Toolbar.css is loaded first. Note that .dijitButtonNode is also used for the ComboBox down arrow, which should be tested through test_Editor.html. Fixes on trunk, refs #13917.

comment:9 Changed 8 years ago by bill

Resolution: fixed
Status: assignedclosed

In [27018]:

Fix specificity of selectors in Toolbar.css to override Button.css even if Toolbar.css is loaded first. Note that .dijitButtonNode is also used for the ComboBox down arrow, which should be tested through test_Editor.html. Fixes on 1.7 branch, fixes #13917.

Note: See TracTickets for help on using tickets.