Materialize css modal not working

Question

I work with Materialize CSS and with the expandable element of the accordion style ( http://materializecss.com/collapsible.html ).

For some reason, I couldn’t choose anything after the 5th option. Here is the image. I don’t know why I can’t choose anything after the fifth option (Terrengan u).

When Kelantan is clicked, the value of the previous selected one is not updated to it, while anything above Kelantan works.

Here is my code. My goal is to be able to use the folding ones as intended (i.e. with opening the element and staying open).

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

I found another post with the same problem. https://github.com/Dogfalo/materialize/issues/2436

Answer 1

I just checked the fiddle. It seems to me that the problem is with the selection field. If you change or add a selection class to the default browser. The violin works great.

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

The problem with the parameters of the selection window is not registered in the DOM when the modal height exceeds the height of the parent element, which leads to the fact that parameters that are not initially displayed cannot be selected ... therefore even if we click on the options, the click will not be registered , and the option will not be selected.

To fix this, you can use the drop-down list instead of the selection window or use the default browser selection window if this is normal.

Answer 2

Looks like a bug in Materialize v0.97.3. Here is the fiddle with 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> 

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

Works great with the updated version of materialization. Tested locally with Materialize v0.97.5 on the latest version of Chrome.