CODEWITHSUNDEEP
cssdojo
peirix
peirix

Reputation: 37751

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) solution:

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

Upvotes: 6

Views: 6755

Answers (4)

Brian Mathews
Brian Mathews

Reputation: 692

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

Upvotes: 2

Rajkamal Subramanian
Rajkamal Subramanian

Reputation: 6944

Inline style is working.

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

Upvotes: 0

peller
peller

Reputation: 4543

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.

Upvotes: 4

2ndkauboy
2ndkauboy

Reputation: 9387

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.

Upvotes: 1

Related Questions