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