All geek questions in one place

Setting the width for the Dojo button

Note. This is related to this issue .

I am trying to create a dojo button programmatically as follows:

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

Now, although I specify the width, when displaying the width of the button, the minimum is set (for example, text + margin). The reason explained in the answer is that dojo overrides the css style for the button ( class="dijitButtonNode" ). Next (in the same answer), the width is set by redefining the styles for the same class.

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

+6
source share
4 answers

Finally, I did it. To set the width, we must set the width using the 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");
+7
source

Worked for me:

  domStyle.set(btnOk.domNode, "width", "100px"); domStyle.set(btnOk.domNode.firstChild, "display", "block");
+3
source

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; }

Optional: if you add this class, text alignment will be messed up. This can be resolved by adding the following CSS rules:

 .{your theme: eg. tundra} .dijitButtonText{ padding: 0; }

Finally check out my fiddle .

0
source

Full Width Button: https://jsfiddle.net/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%; }
0
source

Source: https://habr.com/ru/post/893226/

More articles:


All Articles