Opened 12 years ago

Closed 12 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:


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)

dijitFormButtonRegression.html (1011 bytes) - added by Kitson Kelly 12 years ago.
Example of a button that is broken

Download all attachments as: .zip

Change History (2)

Changed 12 years ago by Kitson Kelly

Example of a button that is broken

comment:1 Changed 12 years ago by bill

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.