Dojo按钮设置宽度

我想以编程方式创建道场按钮这样的：

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

现在即使我指定的宽度，同时显示该按钮的宽度设置为最小（即文本+保证金）。 answer中解释的原因是dojo覆盖按钮的css样式（class="dijitButtonNode"）。进一步（在相同的答案中）宽度是通过覆盖同一类的样式设置的。

是否有可能做到这一点（即设置宽度）没有这种CSS解决方法？

来源

2011-07-21 Gaurav

最后，我解决了它。要使用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");

来源

2011-07-21 05:41:31 Gaurav

当你自己解决问题时，你可以接受你自己的答案 - 帮助把它从未确认的队列中解放出来。 – hugomg

@missingno感谢提醒我忘了:-) – Gaurav

为我工作组，我们必须设置宽度宽度：

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

来源

2012-07-11 18:01:18 Mikhail

你可以通过提供一些上下文来改善你的答案 - 为什么这个工作？有参考文件吗？ – Dhara

棒极了！谢谢。 – OammieR

上面的代码有效，但是如何设置高度？ domstyle.set（btnOk.domNode，“height”，“30px”）不起作用 –

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

<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。

来源

2014-12-11 09:08:25 GuyT

全宽按钮：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%; 
}

来源

2017-02-26 15:59:42 kxxxxoo

Dojo按钮设置宽度

回答

相关问题