Kendo UI 下拉列表采用最大选项的大小

Posted 2023-05-07

【中文标题】Kendo UI 下拉列表采用最大选项的大小

【英文标题】：Kendo UI dropdownlist takes size of biggest option

【发布时间】：2013-07-15 14:26:37

【问题描述】：

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

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

【问题讨论】：

tinypic.com/r/2vt63pc/5 这是它不起作用的屏幕，任何想法将不胜感激。

ddlViews.list.width("auto")， .list 是什么意思？ KendoDropdown 上没有这样的属性。

// 获取 DropDownList 的引用 var dropdownlist = $("#size").data("kendoDropDownList"); // 设置 DropDownList 的宽度 dropdownlist.list.width(500);检查此链接以获取更多文档kendoui.com/forums/kendo-ui-web/dropdownlist/…

【参考方案1】：

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

.k-list

    width:auto !important;

link to js fiddle

【讨论】：

jsfiddle 在堆栈溢出选项之前缺少一个开始选项标记。

谢谢。你帮了我很多。

【参考方案2】：

我们可以通过两种方式为 Kendo UI 组合框列表宽度设置宽度。

答案-1 *为静态方式*

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

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

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

【参考方案3】：

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

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

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

感谢您的回答。

希望这会有所帮助！ 拉扎

【参考方案4】：

按照这个答案设置下拉列表的宽度：Kendo dropdown width

.k-dropdown 
     width: 250px;

【参考方案5】：

剑道现在完全支持这一点，带有 autoWidth 选项

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

【参考方案6】：

要设置下拉框固定宽度（仅适用于列表），请使用

 ddlViews.list.width(200);

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

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

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

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