html - 如何设置Dojo组合框的宽度

如何使用css控制dojo组合框的宽度，我尝试了#comboId{width:50px}其中comboId是<select id="comboId">的Id。但它不起作用

最佳答案

组合框有点棘手，因为这个小部件的工作方式是，idcomboId的节点最终将成为小部件中的内部输入节点，而不是小部件的顶级domNode（它接收idwidget_comboId）。这可能就是为什么这对你没有影响。
注意，并不是所有的widget都做这种有趣的事情，而是像dijit.form.TextBox和dijit.form.ComboBox这样的widget（以及扩展它们的widget）做的事情。
或许最简单的解决方法是在小部件和样式中添加一个类（通常鼓励这样做，因为它比将特定的id耦合到css中更具重用性）。假设您以声明方式实例化：

<select id="comboId" class="comboClass" dojoType="dijit.form.ComboBox">
    ...
</select>

然后在css中：

.comboClass { width: 50px; }

其他解决方案
如果您是以声明方式实例化这个小部件，那么您可以将样式内联应用，它将自动正确映射到小部件的domNode：

<select id="comboId" dojoType="dijit.form.ComboBox" style="width: 50px">
    ...
</select>

或者，可以在小部件实例化后设置其样式属性：

dijit.byId('comboId').set('style', {width: '50px'});

这相当于以声明方式在DOM节点上设置宽度样式内联。