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

Raz*_*aza 8 javascript css kendo-ui

 var ddlViews = $('#ddlViews').data("kendoDropDownList");
        ddlViews.list.width("auto");
Run Code Online (Sandbox Code Playgroud)

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

Aru*_*llu 15

.k-list-container{
    min-width:126px !important;//give a min width of your choice
    width: auto!important;
}
.k-list
{
    width:auto !important;
}
Run Code Online (Sandbox Code Playgroud)

落下

链接到js小提琴


小智 5

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

答案1 *静态方式*

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

答案-2使用css的动态方式

    .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;
    }
Run Code Online (Sandbox Code Playgroud)

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


Raz*_*aza 3

.k-dropdown {
    max-width:10em !important;
}
Run Code Online (Sandbox Code Playgroud)

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

!important 属性强制添加您想要的样式。它还会覆盖剑道计算的宽度。

谢谢回答。

希望这可以帮助 !拉扎