Kendo UI下拉列表占用了最大的选项

时间:2013-07-17 06:45:42

标签: javascript css kendo-ui

 var ddlViews = $('#ddlViews').data("kendoDropDownList");
        ddlViews.list.width("auto");

我已将宽度添加为自动但不起作用,下拉框的宽度也会获得所选项目的最大宽度,并且开箱即用。我希望下拉框具有固定宽度,但下拉列表项应以单行显示内容。正常下拉可行。

6 个答案:

答案 0 :(得分:15)

.k-list-container{
    min-width:126px !important;//give a min width of your choice
    width: auto!important;
}
.k-list
{
    width:auto !important;
}

dropdown

link to js fiddle

答案 1 :(得分:5)

我们可以为Kendo UI组合框列表宽度设置2种宽度。

<强>答-1 * 对于静态方式 *

// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);

使用css

回答-2动态方式
    .k-list-container
    {
        white-space: nowrap !important;
        width: auto!important;
        overflow-x: hidden !important;
        min-width:243px !important;
    }

    .k-list
    {
        overflow-x: hidden !important;
        /*overflow-style: marquee;*/
        overflow-y: auto !important;
         width:auto !important;
    }

以上css代码适用于动态数据加载。

答案 2 :(得分:3)

.k-dropdown {
    max-width:10em !important;
}

将这些添加到CSS并且它可以工作,宽度将是您要指定的最大宽度,以便下拉框具有此最大宽度,而内容/项目将在一行中。

!important属性强有力地添加了您想要的样式。它也会覆盖由剑道计算的宽度。

感谢您的回答。

希望这有帮助! 拉扎

答案 3 :(得分:1)

按照以下答案设置下拉列表中的宽度:Kendo dropdown width

.k-dropdown {
     width: 250px;
}

答案 4 :(得分:1)

剑道现在完全支持 autoWidth 选项

<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
  autoWidth: true,
  dataSource: {
    data: ["Short item", "An item with really, really long text"]
  }
});
</script>

答案 5 :(得分:0)

要设置下拉框固定宽度(仅限列表),请使用

 ddlViews.list.width(200);

要设置下拉列表的固定宽度,无论列表是否处于活动状态,请将css中的宽度定义为

<select id="ddlViews"  style="width:200px;" >
    <option></option>
</select>

我能够通过css将选项内容显示在一行中

ddlViews.list.css("white-space","nowrap");