Поле Select2 не отображается должным образом на вкладках Boostrap (отображение: нет при загрузке) - PullRequest
Новая
       12

Поле Select2 не отображается должным образом на вкладках Boostrap (отображение: нет при загрузке)

0 голосов
/ 04 марта 2019

Эта проблема является открытой, мне нужен обходной путь, если кто-нибудь знает лучшее решение.Эта проблема доступна в https://github.com/select2/select2/issues/4220

Проблема При использовании поля Select2 на вкладке Bootstrap, если при загрузке поле находится внутри одной из скрытых вкладок, результирующее поле не отображается должным образом.

Действия по воспроизведению проблемы

Создание 2 вкладок Boostrap, включая одну активную.Создайте 1 новое поле Select2 для каждой вкладки.

Ожидаемое поведение и реальное поведение

При этом на активной вкладке при загрузке DOM поле будет принимать 100%width и отобразить во второй строке под меткой, что является ожидаемым поведением.

На скрытой вкладке при загрузке DOM поле будет принимать 100px (это соответствует всем тестам, которые я сделал) и будетотображается рядом с меткой.

Кроме того, текст заполнителя для поля Multiple отображается также с размером 100px.Таким образом, даже при использовании «хака», такого как $ .fn.select2.defaults.set («width», null); заполнитель для нескольких полей по-прежнему отображается с шириной 100 пикселей (это показано в JSFiddle на вкладке 4) 

$(function() {
  // Activate Select2
  $('#tab1_select2_single').select2();
  $('#tab1_select2_multiple').select2();
  $('#tab2_select2_single').select2();
  $('#tab2_select2_multiple').select2();
  $('#tab3_select2_single').select2();
  $('#tab3_select2_multiple').select2();

  // Width hack
  $.fn.select2.defaults.set("width", '100%');
  $('#tab4_select2_single').select2();
  $('#tab4_select2_multiple').select2();

  // Everything is loaded, hide the tab2
  $('#tab3').removeClass('active');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>


<div class="container">
  <div class="container">
    <h1>
          Select2 Tests
        </h1>

    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab" aria-expanded="true">Tab 1</a></li>
        <li role="presentation" class=""><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab" aria-expanded="false">Tab 2</a></li>
        <li role="presentation" class=""><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab" aria-expanded="false">Tab 3</a></li>
        <li role="presentation" class=""><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab" aria-expanded="false">Tab 4</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab1">
          <div class="alert alert-success">
            This tab is "active" when loading and stay active afterwards. Select2 is displayed as expected.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab1_select2_single">Tab1 Select2 Single</label>
            <select id="tab1_select2_single" data-placeholder="Please select Single State - Tab1" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab1_select2_multiple">Tab1 Select2 Multiple</label>
            <select id="tab1_select2_multiple" data-placeholder="Please select Multiple State - Tab1" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tab2">
          <div class="alert alert-danger">
            This tab is not "active" when loading. Select2 is <strong>not</strong> displayed as expected.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab2_select2_single">Tab2 Select2 Single</label>
            <select id="tab2_select2_single" data-placeholder="Please select Single State - Tab2" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab2_select2_multiple">Tab2 Select2 Multiple</label>
            <select id="tab2_select2_multiple" data-placeholder="Please select Multiple State - Tab2" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane active" id="tab3">
          <div class="alert alert-warning">
            This tab is "active" when loading. It is de-actived with <code>$('#tab3').removeClass('active');</code> when the DOM is ready. Select2 is displayed as expected.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab3_select2_single">Tab3 Select2 Single</label>
            <select id="tab3_select2_single" data-placeholder="Please select Single State - Tab3" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab3_select2_multiple">Tab3 Select2 Multiple</label>
            <select id="tab3_select2_multiple" data-placeholder="Please select Multiple State - Tab3" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tab4">
          <div class="alert alert-danger">
            This tab is not "active" when loading. Both field have a small "hack" (<code>$.fn.select2.defaults.set("width", '100%');</code>) to set the width.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab4_select2_single">Tab4 Select2 Single</label>
            <select id="tab4_select2_single" data-placeholder="Please select Single State - Tab4" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab4_select2_multiple">Tab3 Select2 Multiple</label>
            <select id="tab4_select2_multiple" data-placeholder="Please select Multiple State - Tab4" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</div>
<!-- /.container -->
...