how can I expand, or make a dojo button wider?

Question

I have this piece of code:

<div dojoType="dijit.layout.ContentPane" style="width:200px;margin:0;padding:0;" doLayout="true"> <button dojoType="dijit.form.Button" style="width:100%;" doLayout="true"><span style="width:200px;">&nbsp;</span></button></div>

I think it is clear what I try to do. Do you know how I could make the button take 100% of it's container's width? Thank you.

Answer 1

Alright, I got the answer at an IBM's forum, someone told me to override the dijit style:

.dijitButtonNode{ width:100%; }

and that did the job :-)

Answer 2

if you need to change the width for a single instance, changing the CSS class wouldn't be a good idea... you can make it programmatically by applying the style to the domNode of your widget... like myButtom.domNode.style.width = "100%";

Answer 3

if sticking with declaration, add a specifier class:

<button data-dojo-type="dijit/form/Button" type="button" class="myButtons"></button>

then, in css:

.myButtons .dijitButtonNode
{
    width:100%;
}