在折叠的Bootstrap手风琴中开始时，选择的下拉宽度接近于零

Question

如果选择下拉列表位于Bootstrap 3手风琴最初隐藏内，则下拉列表的宽度接近零。扩展后它看起来像这样：

而我希望它看起来像这样：

当panel-collapse collapse div没有in类时，会出现问题，有效地表明它最初崩溃了。以下是重现此问题的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
    $('select').chosen();
});

＆＃13;

.panel-heading { cursor: pointer; }
body { padding: 10px; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我该怎么做才能防止这种情况发生？调用选择为.chosen({width: '90%'});，即硬编码宽度有效，但不能令人满意（我想在样式表中使用样式或使用Bootstrap）。唯一的解决方案似乎是挂钩扩展事件并强制选择更新，但这也是一种解决方法。

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

Answer 1

<强>原因：

选择在DOM准备就绪时计算并指定宽度，在此之前，模拟下拉列表的初始宽度为零。

<强>解决方案：

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

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

!important部分是因为选择了为元素本身添加内联样式width: 0;，您需要使用!important覆盖特异性。

Answer 2

来自jquery-chosen官方文档：

  

选择框的宽度。默认情况下，选择尝试   匹配您要替换的选择框的宽度。如果您的选择是   当Chosen被实例化时隐藏，你必须指定宽度或   select将显示宽度为0。

因此您需要指定width属性

＆＃13;

＆＃13;

$(document).ready(function() {
    $('select').chosen( { width: '100%' } );
});

＆＃13;

.panel-heading { cursor: pointer; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> 修改 ：

同样作为黑客，您可以检查可见的选择框宽度并将其应用于所有其他人：

$(document).ready(function() {
    $('select').chosen( { width: $( '.panel-collapse.collapse.in select' ).eq( 0 ).width() + 'px' } );
});

Answer 3

如果你这样做

$('.my-element').chosen({width:"auto"});

Answer 4

这样你就可以给每个选择它的初始大小：

$('select').each(function(){

    $(this).chosen({ width: $(this).eq( 0 ).width() + 'px' });

})

Answer 5

为避免所选内容应用内联width样式，请在初始化选择时传递一个空字符串作为width参数。

$('#your-select-element').chosen({ width: '' });

在后台，选择仅调用jQuery .width()即可使用您提供的值来设置元素的宽度。

通过传递一个空字符串，selected-container元素将根本不会应用任何宽度样式。这样一来，您就无需弄乱!important或其他可能与样式表冲突的事情。

Answer 6

如果select在隐藏表单中，则width仍为0.这是我对它的修复：

  $(document).ready(function() {
    refreshSelects();
  });

  /**
   * Re-draws selects to fix width of 'chosen' wrapper.
   */
  refreshSelects = function() {
    $('select').each(function(){
      // Re-calculate width of every select wrapper. Hidden selects width is
      // calculated as 0 by 'chosen' plugin.
      $(this).siblings('.chosen-container').css('width', realWidth($(this)));
    });

    /**
     * Calculates real width of an element.
     *
     * @param {object} $element
     *   jQuery object.
     *
     * @returns {string}
     *   Element width string.
     */
    function realWidth($element){
      var $clone = $element.clone();
      $clone.css("visibility","hidden");
      $('body').append($clone);
      var width = $clone.outerWidth();
      $clone.remove();
      return width;
    }
  }

Answer 7

您可以调用手风琴的选择节目来设置确切的高度。

$(document).ready(function() {
    $("#accordion").on("show",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>