jquery – 从折叠的Bootstrap手风琴开始时,选择的下拉菜单宽度接近零

当被选中的下拉菜单最初被隐藏的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).唯一的解决方案似乎是钩住扩展事件并强制选择更新,但这也是一种解决方法.

最好我有一行CSS来解决这个问题,或者知道这是否可能是(组合)工具中的错误？

解决方法

原因：

选择当DOM准备好时计算并分配宽度,之后模拟下拉菜单的初始宽度为零.

解：

将以下内容添加到CSS中,以便下拉列表具有初始宽度：

.chosen-container.chosen-container-single {
    width: 300px !important; /* or any value that fits your needs */
}

！的重要部分是因为选择添加了一个宽度为0的内联样式;对于元素本身而言,你需要重写特定性！