applying css to dijit button

Question

I have the following HTML and CSS:

<button id="myBtn" dojoType="dijit.form.Button">Testing</button>

#myBtn {
    margin-left: 100px;
}

The CSS is supposed to push the button in 100px. But since dijit applies some extra layers of HTML around the button, the button gets a 100px padding.

JSbin to show the problem

edit: Found one (not IE6-compatible) solution:

[widgetid=myBtn] { margin-left: 100px; }

Answer 1

In this case you should not add the margin-left to the button itselft but to the additional HTML araound the button that is created. Try this:

.dijitLeft{
    margin-left: 100px;
}

But this will indeed add a margin to every button. If you don't want that, add the margin to the parent span using JavaScript after the additional HTML was created.

Answer 2

Inline style is working.

<button id="myBtn" dojoType="dijit.form.Button" style="margin-left:100px">Testing</button>

Answer 3

see above :-) Surround with a DIV and use that DIV in your static CSS.

I think decorating with HTML may actually be a simpler solution than trying to bake more into the widget or the widget's template.

Answer 4

Instead of applying the style by ID, do it through a class.

Stylesheet:

.myBtn { margin-left: 100px; }

Code:

<button class="myBtn" dojoType="dijit.form.Button" id="myBtn">Testing</button>

http://jsbin.com/ejoma/2