materialize css modal nie działa

Question

Pracuję z Materialise CSS i używam składanego elementu w stylu akordeonu (http://materializecss.com/collapsible.html).

Z jakiegoś powodu nie mogłem wybrać niczego po piątej opcji. Here is the picture. Nie wiem, dlaczego nie mogę wybrać niczego po piątej opcji (Terrengan u).

Po kliknięciu Kelantan, wartość poprzednio wybranego nie jest do niego aktualizowana, podczas gdy wszystko powyżej Kelantan działa.

Oto mój kod. Moim celem jest po prostu użycie funkcji zwijania zgodnie z przeznaczeniem (tj. Z otwarciem elementu i pozostaniem otwartym).

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

Znalazłem kolejny post z tego samego problemu zbyt. https://github.com/Dogfalo/materialize/issues/2436

Answer 1

Właśnie sprawdziłem skrzypce. Wydaje mi się, że problem jest związany z polem wyboru. Jeśli zmienisz lub dodasz klasę zaznaczenia do domyślnej przeglądarki. Fiddle działa dobrze.

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

Problem jest z wybranych opcji okna nie są coraz zarejestrowanych DOM gdy wysokość modalnego przekracza wysokość elementu nadrzędnego, powodując opcje, które nie są świadczone początkowo nie być wybierane ... więc nawet jeśli klikniemy na opcje, kliknięcie nie zostanie zarejestrowane, a opcja nie zostanie wybrana.

Aby to naprawić, możesz użyć pola wyboru drop-down zamiast wybierz, lub przejdź do domyślnego okna wyboru przeglądarki, jeśli wszystko jest w porządku.

Answer 2

Wygląda jak błąd w Materialize v0.97.3. Oto skrzypce z Materialise 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> 

Fiddle: http://jsfiddle.net/8rmjymtr/9/

współpracuje z zaktualizowanej wersji materializować. Testowany lokalnie z Materialise v0.97.5 na najnowszym Chrome.