materialize CSSのモーダルが動作しない

Question

私はMaterialize CSSと折り畳み可能なアコーディオンスタイルの要素（http://materializecss.com/collapsible.html）を使用しています。

何らかの理由で、5番目のオプションの後に何も選択できませんでした。 Here is the picture. 5番目のオプション（Terrengan u）の後に何も選択できない理由はわかりません。

Kelantanがクリックされている場合、以前選択された値はその値に更新されず、Kelantanの上の値は更新されます。

ここに私のコードです。私の目標は、意図したように折りたたみ可能なもの（つまり、要素が開いていて開いたままの状態）を使用できることだけです。

<div class="modal"> 
    <div class="input-field col s4 m6 l12"> 
     <select class="icons"> 
      <option value="" disabled selected>Choose your state</option> 
      <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option> 
      <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option> 
      <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option> 
      <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option> 
      <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan u</option> 
      <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option> 
      <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option> 
      <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option> 
      <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option> 
      <option value="" data-icon="images/flag/malacca.jpg" class="left circle">Malaka</option> 
      <option value="" data-icon="images/flag/johor.jpg" class="left circle">Johor</option> 
      <option value="" data-icon="images/flag/sarawak.jpg" class="left circle">Sarawak</option> 
      <option value="" data-icon="images/flag/sabah.jpg" class="left circle">Sabah</option> 
     </select> 
     <label>Select State</label> 
    </div> 
</div> 

JS

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('select').material_select(); 
    }); 
</script> 

JSFiddle：http://jsfiddle.net/8rmjymtr/5/

私も同じ問題を持つ別のポストを見つけました。 https://github.com/Dogfalo/materialize/issues/2436

Answer 1

私はちょうどフィドルをチェックアウトしました。問題は選択ボックスにあると私には思われます。選択ボックスクラスをブラウザのデフォルトに変更または追加した場合。フィドルはうまくいく。

<select class="icons browser-default"> // this line 

モーダル高さは、このように選択できないために最初にレンダリングされていないオプションを引き起こし、親要素の高さを超えたときに問題がDOMに登録取得されていない選択ボックスのオプションである... オプションをクリックしても、クリックは登録されず、オプションも選択されません。

この問題を解決するには、選択ボックスの代わりにdrop-downを使用するか、ブラウザのデフォルトセレクトボックスに進むことができます。

Answer 2

Materialize v0.97.3のバグのようです。 ここにはMaterialize v0.97.5のバイブルがあります。

<div class="modal"> 
    <div class="input-field col s4 m6 l12"> 
     <select class="icons"> 
      <option value="" disabled selected>Choose your state</option> 
      <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option> 
      <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option> 
      <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option> 
      <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option> 
      <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan u</option> 
      <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option> 
      <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option> 
      <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option> 
      <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option> 
      <option value="" data-icon="images/flag/malacca.jpg" class="left circle">Malaka</option> 
      <option value="" data-icon="images/flag/johor.jpg" class="left circle">Johor</option> 
      <option value="" data-icon="images/flag/sarawak.jpg" class="left circle">Sarawak</option> 
      <option value="" data-icon="images/flag/sabah.jpg" class="left circle">Sabah</option> 
     </select> 
     <label>Select State</label> 
    </div> 
</div> 

JS

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('select').material_select(); 
    }); 
</script> 

フィドル：マテリアライズ更新されたバージョンと http://jsfiddle.net/8rmjymtr/9/

作品罰金。最新のMaterialize v0.97.5をローカルでテストしました。