Question

我想使用一个kendo下拉列表，该列表具有固定的大小，因为它受到页面中其他字段的约束，但是当它显示列表的下拉项时，下拉区域应调整大小到物品的最大长度。显示的项目的固定宽度排序，但下拉列表的自动宽度。像

这样的东西

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

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

这可以通过CSS或通过jQuery设置的下拉列表属性来实现吗？

Answer 1

您可以使用CSS或使用方法设置DropDown List的宽度。

如果你DropDownList的身份证明是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);

Answer 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
}

Answer 3

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

<input .. class="ExtraLarge ..

哪个产生了：

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

有了这个ExtraLarge类，这在FireFox和Chrome中非常有用：

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

Answer 4

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

<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");

现在，要将此控制器设置为占据整个宽度，您需要做的是将select元素的宽度设置为100％，或者您想要的任何内容。 e.g：

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

OR，是一个css文件：

#myDropDown { width: 100% }

Answer 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

设置kendo ui下拉列表宽度

5 个答案: