8

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

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

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

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

4

5 回答 5

15

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

如果你的 idDropDownList是，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);
于 2013-05-31T23:34:53.807 回答
5

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

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

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

.myDivClass span.k-dropdown {
  width: 300px
}
于 2014-04-25T14:23:56.267 回答
0

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

<input .. class="ExtraLarge ..

其中产生：

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

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

span.k-dropdown.ExtraLarge
{
    width:400px;
}
于 2014-08-18T20:03:12.293 回答
0

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

<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% }
于 2015-06-22T14:04:22.760 回答
0

如果你 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

于 2017-01-23T13:03:18.943 回答