当被选中的下拉菜单最初被隐藏的Bootstrap 3手风琴中时,下拉菜单的宽度接近零.扩展后,它看起来像这样:
而我期望它看起来像这样:
当面板崩溃崩溃div没有在类中时,会出现问题,有效地指示它最初被折叠.以下是重现此问题的代码:
$(document).ready(function() { $('select').chosen(); });
.panel-heading { cursor: pointer; } body { padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapSEOne"> Expand me to show the issue! </h4> </div> <div id="collapSEOne" class="panel-collapse collapse"> <div class="panel-body form-inline"> <p>This select has a near-width zero:</p> <select class="form-control"> <option>Short</option> <option>Longer option</option> <option>The longest option of them all</option> </select> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <h4 class="panel-title"> Already expanded / how it <em>should</em> be </h4> </div> <div id="collapseTwo" class="panel-collapse collapse in"> <div class="panel-body form-inline"> <p>This panel is initially visible and <em>does</em> have correct width for the select Box:</p> <select class="form-control"> <option>Short</option> <option>Longer option</option> <option>The longest option of them all</option> </select> </div> </div> </div> </div>
我可以做些什么来防止这种情况发生?调用选择为.chosen({width:’90%’}),即具有硬编码宽度的工作,但不令人满意(我想在我的样式表中使用或使用Bootstrap).唯一的解决方案似乎是钩住扩展事件并强制选择更新,但这也是一种解决方法.