Ширина выделенных выпадающих точек возле нуля при запуске в рухнувшем бадкордексе Bootstrap

Когда выпадающее меню Chosen находится внутри аккордеона Bootstrap 3, который изначально скрыт, тогда ширина выпадающего списка близка к нулю. После расширения он выглядит так:

width zero of select

В то время как я ожидаю, что это будет выглядеть так:

width normal for select

Проблема возникает, когда panel-collapse collapse div не имеет класса in, что фактически указывает на его первоначальное слияние. Вот код для воспроизведения этой проблемы: 

$(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="#" onclick="location.href='http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'; return false;" 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>

ОТВЕТЫ

Ответ 1

Причина:

Выбранный вычисляет и присваивает ширину, когда DOM готов, до этого начальная ширина эмулируемого раскрывающегося списка равна нулю.

Решение:

Добавьте в свой CSS следующее: выпадающее меню имеет начальную ширину:

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

Часть !important состоит в том, что выбранный добавляет встроенный стиль width: 0; к самому элементу, и вам нужно переопределить спецификацию с помощью !important.

Ответ 2

Из jquery-selected официальная документация:

Ширина выбранного поля выбора. По умолчанию выбранные попытки сопоставьте ширину поля выбора, которое вы заменяете. Если ваш выбор если вы выбрали Chosen, вы должны указать ширину или select будет отображаться с шириной 0.

Итак, вам нужно указать атрибут width

$(document).ready(function() {
    $('select').chosen( { width: '100%' } );
});
.panel-heading { cursor: pointer; }
<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>

Ответ 3

Таким образом вы дадите каждому выбрать его начальный размер:

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

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

})

Ответ 4

Если вы работаете,

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

Ответ 5

Если выбор находится внутри скрытой формы, ширина остается 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;
    }
  }

Ответ 6

Вы можете вызвать select на шоу аккордеона, который установит точную высоту.

$(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="#" onclick="location.href='http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'; return false;" 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>