设置Dojo按钮的宽度

sd2nnvve 于 2022-12-20 发布在 Dojo

关注(0)|答案(4)|浏览(386)

注：与this question有关。
我尝试以编程方式创建一个dojo按钮，如下所示：

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

现在，即使我指定了宽度，当显示按钮时，宽度被设置为最小值（即文本+边距）。原因在答案中解释为dojo覆盖了按钮（class="dijitButtonNode"）的css样式。此外（在同一个答案中）宽度是通过覆盖同一个类的样式来设置的。
如果没有css的变通方法，是否可以做同样的事情（即设置宽度）？

dojo

来源：https://stackoverflow.com/questions/6771228/setting-width-for-dojo-button

4条答案

按热度按时间

jgzswidk1#

最后，我想出来了，要设置宽度，我们必须使用www.example.com函数来设置宽度dojo.style

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

赞(0）回复(0）举报 2022-12-20

ryoqjall2#

对我有效：

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

赞(0）回复(0）举报 2022-12-20

tf7tbtn23#

另一种可能的解决方案是向按钮添加类：

<input type="button" data-dojo-props="label : 'Test'" class="normalButton" id="test" data-dojo-type="dijit/form/Button" />

在CSS中：

.normalButton span{
    width: 100px;
}

额外：如果你添加这个类，你的文本对齐方式会变乱。这可以通过添加以下CSS规则来解决：

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

最后，看看my fiddle。

赞(0）回复(0）举报 2022-12-20

ao218c7q4#

全宽按钮：https://jsfiddle.net/51jzyam7/
超文本：

<body class="claro">
    <button id="myButtonNode" type="button"></button>
</body>

联森：

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）回复(0）举报 2022-12-20

我来回答

设置Dojo按钮的宽度

4条答案

相关问题

热门标签

最新问答