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 ?
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 ?
Share Improve this question edited May 23, 2017 at 11:53 CommunityBot 11 silver badge asked Jul 21, 2011 at 4:23 GauravGaurav 8042 gold badges13 silver badges32 bronze badges4 Answers
Reset to default 7Finally, 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");
Worked for me:
domStyle.set(btnOk.domNode, "width", "100px");
domStyle.set(btnOk.domNode.firstChild, "display", "block");
Another possible solution is to add a class to the button:
<input type="button" data-dojo-props="label : 'Test'" class="normalButton" id="test" data-dojo-type="dijit/form/Button" />
In your CSS:
.normalButton span{
width: 100px;
}
Extra: if you add this class your alignment of the text will be messed up. This can be solved by adding following CSS rules:
.{your theme: eg. tundra} .dijitButtonText{
padding: 0;
}
Finally, check out my fiddle.
Full width button: https://jsfiddle/51jzyam7/
HTML:
<body class="claro">
<button id="myButtonNode" type="button"></button>
</body>
JS:
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"],
function(Button, dom){
var myButton = new Button({
label: "My big button",
class: 'myCSSClass',
}, "myButtonNode").startup();
});
CSS:
.dijitButton.myCSSClass{
display: block;
}
.dijitButton.myCSSClass .dijitButtonNode{
width:100%;
}