Question

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

Answer 1

ComboBox有点棘手，因为这个小部件的工作方式，标识为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节点上内联设置宽度样式。

Answer 2

使用css设置宽度对我不起作用。但是，在施工时设置风格确实：

var spatialQueryComboBox = new ComboBox({
            id: "selectionType",
            style:{width: "100px"},
            store: spatialSelectionStore,
            searchAttr: "name"
        }, "spatialSelectionType");

Answer 3

你有没有尝试过：

dojo.style("comboId", "width", "50px");

Answer 4

这可以通过调用函数“ forceWidth（true）”来完成，并在CSS文件中定义具有所需高度的类.mblComboBoxMenu。

例如：

.mblComboBoxMenu {
    position: relative;
    overflow-y: hidden !important;
    overflow: hidden;
    border: 1px solid #00677f;
    border-radius: 0;
    background-color: white;
    color: #868e96;
    width: 80% !important; 
}

如何设置Dojo Combobox的宽度

4 个答案:

其他解决方案