applying css to dijit button
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) soluti开发者_JAVA技巧on:
[widgetid=myBtn] { margin-left: 100px; }
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.
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
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.
Inline style is working.
<button id="myBtn" dojoType="dijit.form.Button" style="margin-left:100px">Testing</button>
精彩评论