设置Kendo UI下拉列表的宽度。

Question

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

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

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

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

- cortomaltese_marcof

Answer 1

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

如果您的DropDownList的id是my-dropdown，则应编写以下内容：

• 使用CSS

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

注意：我们已经将id更改为原始值后加上了-list。 "!important"很重要，因为您想覆盖原始宽度定义。

• 使用一种方法

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

除了使用 "auto" 让宽度自动适应文本外，您还可以使用固定宽度：

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

或：

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

- OnaBai

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
}

- badMonkey

Answer 3

使用以下代码作为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");

现在，要将此控制器设置为占据整个宽度，您需要做的是将选择元素的宽度设置为100％或任何您想要的尺寸。 例如：

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

或者，是一个 CSS 文件：

#myDropDown { width: 100% }

- AlKhalil Tarek

Answer 4

我的解决方法是在基本元素上渲染一个额外的类：

<input .. class="ExtraLarge ..

这将产生：

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

有了这个ExtraLarge类，它在FireFox和Chrome中运行得非常好：

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

- Brian Mains

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

- Shivendra