如何设置 Dojo 组合框的宽度答案

【问题标题】：How to set width of a Dojo Combobox如何设置 Dojo 组合框的宽度
【发布时间】：2011-03-05 13:13:28
【问题描述】：

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

【问题讨论】：

【解决方案1】：

ComboBox 有点棘手，因为这个小部件的工作方式，id 为 comboId 的节点最终将成为小部件内部的输入节点，而不是小部件的顶级 domNode（它接收 id @987654322 @ 反而）。这可能就是为什么这对你没有影响。

请注意，并非几乎所有小部件都会做这样有趣的事情，但像 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 节点上以声明方式设置宽度样式。

【讨论】：

【解决方案2】：

使用 css 设置宽度对我不起作用。但是，在构造时设置样式确实：

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

【讨论】：

【解决方案3】：

你试过了吗：

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

【讨论】：

这行不通，原因与 OP 已经尝试过的相同。

【解决方案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; 
}

【讨论】：