更改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%");