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

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.