如何设置 Dojo 组合框的宽度

Posted 2023-02-16

【中文标题】如何设置 Dojo 组合框的宽度

【英文标题】：How to set width of a Dojo Combobox

【发布时间】：2011-03-05 13:13:28

【问题描述】：

如何使用 css 控制 dojo 组合框的宽度，我尝试了 #comboIdwidth: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;