设置剑道 ui 下拉列表宽度答案

【问题标题】：Set kendo ui dropdownlist width设置剑道 ui 下拉列表宽度
【发布时间】：2013-05-27 05:49:47
【问题描述】：

我想使用一个剑道下拉列表，它具有固定大小，因为受页面中其他字段的限制，但是当它显示列表的下拉项时，下拉区域应该调整大小到项目的最大长度。显示项目的固定宽度排序，但下拉列表的自动宽度。类似的东西

|my choice |     <-- fixed width displayed on the page

|next choice     |
|previous choice |  <-- dropdown area to select another item
|dummy           |

这是否可以通过 CSS 或通过 jQuery 设置的下拉列表属性？

【问题讨论】：

标签： user-interface drop-down-menu kendo-ui

【解决方案1】：

您可以使用 CSS 或使用方法来设置下拉列表的宽度。

如果你DropDownList的id是my-dropdown那么你应该写：

使用 CSS

#my-dropdown-list {
    width: auto !important;
}

注意：我们已将-list 附加到原始id。 “！important”很重要，因为您想覆盖原始宽度定义。

使用方法

$("#my-dropdown").data("kendoDropDownList").list.width("auto");

除了使用"auto" 自动调整到文本的宽度外，您还可以使用固定宽度：

#my-dropdown-list {
    width: 300px !important;
}

或：

$("#my-dropdown").data("kendoDropDownList").list.width(300);

【讨论】：

【解决方案2】：

上面的答案对我不起作用。我的一个优势是知道我的下拉菜单位于 div 内。

<div class="myDivClass">
   <select id="myDropDown"><option>First</option><option>Second></option></select>
   <!--... other stuff in the div-->
<div>

我发现 span 有 k-dropdown 类，所以我添加了 CSS

.myDivClass span.k-dropdown {
  width: 300px
}

【讨论】：

【解决方案3】：

对我有用的是在基本元素上渲染一个额外的类：

<input .. class="ExtraLarge ..

生产者：

<span style="" class="k-widget k-dropdown k-header ExtraLarge" ..

有了这个 ExtraLarge 类，它在 FireFox 和 Chrome 中效果很好：

span.k-dropdown.ExtraLarge
{
    width:400px;
}

【讨论】：

【解决方案4】：

使用以下代码作为剑道下拉列表的模板：

<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>

您将使用 jQuery 启动 kendoDropDownList，如下所示：

$("#myDropDown").kendoDropDownList().data("kendoDropDownList");

现在，要将这个控制器设置为占据整个宽度，您需要做的就是将选择元素的宽度设置为 100%，或者您想要的任何值。例如：

<select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select>

或者，是一个css文件：

#myDropDown { width: 100% }

【讨论】：

【解决方案5】：

如果你 DropDownList 的 id 是 my-dropdown 那么你应该写：

#my-dropdown-list {
    width: auto !important;
    -moz-min-width: 120px;
    -ms-min-width: 120px;
    -o-min-width: 120px;
    -webkit-min-width: 120px;
    min-width: 120px;
    /*max-width: 210px;*/
}

阅读下面的解释。 http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width

【讨论】：