2015-04-04 41 views
1

我試圖在自舉模式框中使用一些自定義選擇框與一些不同的CSS和搜索功能。這只是選擇的代碼:自定義選擇框錯誤與自舉模態框

<link rel="stylesheet" href="chosen.css"> 
    <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2"> 
     <option value=""></option> 
     <option value="United States">United States</option> 
     <option value="United Kingdom">United Kingdom</option> 
     <option value="Afghanistan">Afghanistan</option> 
     <option value="Aland Islands">Aland Islands</option> 
     <option value="Albania">Albania</option> 
     <option value="Algeria">Algeria</option> 
    </select> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
    <script src="chosen.jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
var config = { 
    '.chosen-select'   : {}, 
    '.chosen-select-deselect' : {allow_single_deselect:true}, 
    '.chosen-select-no-single' : {disable_search_threshold:10}, 
    '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, 
    '.chosen-select-width'  : {width:"95%"} 
} 
for (var selector in config) { 
    $(selector).chosen(config[selector]); 
} 
    </script> 

問題是,在模態框外部使用select時看起來很好。但是,在模式框中使用時,所有選擇的寬度都是10像素。我錯過了什麼?任何幫助表示讚賞。
編輯:我只是試圖通過jquery設置它的寬度,沒有工作。

回答

1

我認爲問題在於如何設置所選插件。使用帶有自定義寬度最低限度的設置工作正常:

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

和:

http://jsfiddle.net/0h4fowp5/1/

+0

非常感謝你,這是工作。 – 2015-04-04 20:17:12