2015-04-04 90 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