Setting Width For Dojo Button_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-22 07:44 出处：网络

Note: It i开发者_Python百科s related to this question. I am trying to create a dojo button programmatically like this:

Note: It i开发者_Python百科s 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 ?

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");

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

Setting Width For Dojo Button

精彩评论

关注公众号

热门标签

图文推荐

Setting Width For Dojo Button

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：