web-dev-qa-db-ja.com

折りたたまれた状態で開始したときに選択されたドロップダウンの幅がゼロに近いBootstrapアコーディオン

選択されたドロップダウンが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="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の行があるか、またはこれがツール（の組み合わせ）のバグである可能性があるかどうかを知っていますか？

jquerycsstwitter-bootstrapjquery-chosen
17
Jeroen

理由：

Chosenは、DOMの準備ができたときに幅を計算して割り当てます。その前に、エミュレートされたドロップダウンの初期幅はゼロになります。

解決策：

ドロップダウンが初期幅になるように、CSSに以下を追加します。

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

!important部分は、chooseが要素自体にwidth: 0;のインラインスタイルを追加し、!importantで特異性をオーバーライドする必要があるためです。

29
Arbel

jquery-chosen 公式ドキュメントから：

選択した選択ボックスの幅。デフォルトでは、Chosenは、置き換える選択ボックスの幅に一致しようとします。選択がインスタンス化されたときに選択が非表示になっている場合は、幅を指定する必要があります。そうしないと、選択は幅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>

[〜＃〜]編集[〜＃〜]：

また、ハックとして、表示されている選択ボックスの幅を確認し、それを他のすべてに適用することができます。

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

あなたがするならそれは働きます

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

このようにして、各選択に初期サイズを指定します。

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

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

})
3
vincenzo

Selectが非表示のフォーム内にある場合、幅は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;
    }
  }
1
milkovsky

正確な高さを設定するアコーディオンのショーの選択を呼び出すことができます。

$(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>
0
Sunand