改变由Chosen标记的MVC中的下拉控件的宽度

Question

我在mvc中有常规的下拉控件。我想用chosen来装饰它，我在official website中看到了API。它是

$(".chosen-select").chosen({width: "95%"});

即使是简单的下拉，它的宽度也保持不变。请帮助。

Answer 1

我写的如下，并为我工作。

CSS

<link href="~/Content/chosen.css" rel="stylesheet" />

HTML

  @Html.DropDownList("naicsCodeSelect", ViewBag.selectCodes as List<SelectListItem>, new { @multiple = "true", @class = "chosen-select" })

的Javascript

  <script src="~/Scripts/chosen.jquery.js"></script>
  <script>
    $(document).ready(function() {
        $(".chosen-select").chosen({width: "95%"});            
    });
  </script>

更新

如果上述代码不起作用，请使用以下样式

<style>
    .chosen-container
     {
       width:95%!important;
     }
</style>

Answer 2

在their demo site上，95％宽度示例定义以下内容：

<div class="chosen-container chosen-container-single" title="" style="width: 95%;">
   <a class="chosen-single">
    .
    .

您选择的下拉列表应具有相同的应用程序。如果您检查来源，可以确认吗。

Answer 3

selected（）插件通过读取select的outerWidth属性来确定可搜索下拉列表的大小。不幸的是，为了正确显示，计算出的宽度只是略微缩小。调整宽度的最简单方法是更改​​选择字段的outerWidth属性的大小。以下代码将为您执行此操作：

jQuery(document).ready(function ($) {

    // change field_g69s05 to your field's ID

    $("#field_g69s05").outerWidth(230);

});

希望这有用：）

Answer 4

使用此

$('.chosen-choices').css("width", "50px");

或

$('.chosen-choices').css("width", "50%");