如何设置Dojo Combobox的宽度

Question

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

Answer 1

ComboBox有点棘手,因为这个小部件的工作方式,具有id的节点comboId最终将成为小部件内部的内部输入节点,而不是小部件的顶级domNode(而是接收id widget_comboId).这可能就是为什么这对你没有任何影响.

请注意,几乎所有小部件都不会做这样有趣的事情,但是小部件dijit.form.TextBox和dijit.form.ComboBox(和扩展它们的小部件)一样.

也许最简单的方法是在您的窗口小部件和样式的基础上添加一个类(通常鼓励它,因为它比将特定的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节点上内联设置宽度样式.