Question

Note: It is related to this question.

I am trying to create a dojo button programmatically like this:

var btnOK = new dijit.form.Button({
    label: "OK",
    showLabel: true,
    style: "height: 20px; width: 50px;"
});

Now even though I specify the width, while displaying the button width is set to minimum (i.e text + margin). The reason as explained in the answer is that dojo overrides css style for button (class="dijitButtonNode"). Further (in the same answer) the width is set by overriding styles for same class.

Is it possible to do same (i.e set the width) without this css workaround ?

Answer 1

Finally, I worked it out. To set the width we have to set width using dojo.style function

    dojo.create("button",{id: "btnOK",type: "button"},dojo.body());

    var btnOK = new dijit.form.Button({
                label: "OK",
                showLabel: true,
                style: "height: 20px;"
                },
               "btnOK");

    dojo.style("btnOK","width","40px");