Opened 11 years ago
Closed 11 years ago
#11102 closed defect (invalid)
[regression] [claro] baseClass for buttons in claro theme no longer work.
Reported by: | Kitson Kelly | Owned by: | nonken |
---|---|---|---|
Priority: | high | Milestone: | 1.5 |
Component: | themes | Version: | 1.5.0b2 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
I use a custom baseClass to style some of my buttons, but between 1.5.0b1 and 1.5.0b2, when rendered in the claro theme, the custom styling is broken.
For example I set the following style:
.customButton .dijitButtonNode { width: 170px; margin-bottom: 7px; }
And then I declare my button like:
<button dojoType="dijit.form.Button" baseClass="customButton" onClick="console.log('clicked me!');" id="bSample">Sample</button>
But instead of the claro blue rounded button that was 170px wide as I used to get in 1.5.0b1, I get a white "button" with a square grey border. I checked against the soria theme and the button appears to render properly between 1.5.0b1 and 1.5.0b2 and worked previously in 1.4 and 1.3.
I have attached an example.
Attachments (1)
Change History (2)
Changed 11 years ago by
Attachment: | dijitFormButtonRegression.html added |
---|
comment:1 Changed 11 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
I'm not sure what changed between 1.5.0b1 and 1.5.0b2.... However, redefining the baseClass of a widget wipes out all styling; you need to start at zero again. This is intended behavior, and exists for advanced applications, to let them define a completely different style for a widget, without getting interference from unwanted rules in the theme.
So, this ticket doesn't seem valid. Instead, you should just try setting class="..." on your buttons, which will add your class to the button rather than clearing the existing classes (like .dijitButton).
As an aside, I wouldn't expect that margin setting to work since .dijitButtonNode is applied to an inner node in the Button widget, not the outer node.
Example of a button that is broken