剑道下拉宽度

Posted 2023-05-07

【中文标题】剑道下拉宽度

【英文标题】：Kendo dropdown width

【发布时间】：2013-04-11 01:01:49

【问题描述】：

您好，谁能告诉我如何设置剑道下拉菜单的宽度？这是我的代码示例，它不起作用。有什么不对吗？

$("#div1").kendoDropDownList(
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
    Width : "250px"
);

【问题讨论】：

由于我的回答对您不起作用，请向我们展示您的相关代码，即：JS（这是您拥有的）、CSS 和 html。另外，制作一个 jsFiddle。

【参考方案1】：

kendoDropDownList 的配置没有属性宽度。见这里：Kendo Docs

您可以做的是为正确的类设置样式。 由于您希望确实知道下拉列表的位置，因此您可以指定选择器，使其不适用于所有下拉列表。

#myContainer .k-dropdown 
     width: 250px;

【讨论】：

当我尝试申请课程时，它正在申请所有下拉菜单

这不会改变下拉弹出框的宽度（即点击下拉框时打开的弹出框）

它还应该改变弹出窗口的宽度，如下所示：dojo.telerik.com/eXOce。这不适合你吗？也许会打开一个新问题！ :)

【参考方案2】：

如果您必须为不同的控件指定不同的宽度，您可以按照以下方法为特定控件指定宽度。

$("#div1").width(250).kendoDropDownList(
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
)

【参考方案3】：

如果应用了 MVC Razor DropDownList HTML helper/wrapper 语法，那么您可以使用方法 HtmlAttributes 来指定下拉列表的宽度，例如：

 @(Html.Kendo().DropDownList()                                                            .Name("myDDL")
.HtmlAttributes(new  style="width:100px" )

【参考方案4】：

你也可以试试这个；

<script type="text/javascript">
  $(document).ready(function() 
    var kendoDropDown = $('#div1').data('kendoDropDownList');
    kendoDropDown.list.width(250);
  );
</script>

更多文档可以在 Telerik 的官方 API 参考中找到 here。

【参考方案5】：

最好用 CSS 来做

#div1      
    width: 250px;

但可以使用代码

$("#div1").width(250).kendoDropDownList(
    dataSource: items,
    dataTextField: "Name",
   dataValueField: "Id",
)

【参考方案6】：

保持浏览器设置的自动宽度：

$("select").each(function () 
    $(this)
        .width($(this).width())
        .kendoDropDownList();
);

【参考方案7】：

这将 100% 有效，因为它对我有用，我尝试了上述解决方案，但它对我不起作用，所以我自己找到了这个 :)，我希望你们都能从中受益

#DivThatContainsTheDropdown .k-combobox
width: 22em !important;