materialize css select is not working properly

Question

I am trying to use select field in materialize css. But it doesn't seems work properly my code :

<div class="container">  
  <div class="row">

    <div class="input-field s6">
      <label >OS Version</label>
      <select class="validate">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>

    </div>
  </div>
</div>

    <!--  Scripts-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/materialize.js"></script>
    <script src="js/init.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('select').material_select();
    });

    </script>

And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:

from http://materializecss.com/forms.html i have inspected where i founf this :

<div class="select-wrapper">
  <span class="caret">▼</span>
  <input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
  <ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
    <li class="disabled"><span>Choose your option</span></li>
    <li class=""><span>Option 1</span></li>
    <li class=""><span>Option 2</span></li>
    <li class=""><span>Option 3</span></li>
  </ul>
  <select class="initialized">
    <option value="" disabled="" selected="">Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

and from my code i am getting this from inspect:

<div class="select-wrapper">
  <span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
  <select class="validate initialized">
    <option value="" disabled="" selected="">Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

Missing UL element is rendering below all the div, which mean above my footer.. where i am going wrong?

Fiddle : https://jsfiddle.net/007zkvut/

Solution 1

I updated your jsfiddle because it was loading Materialize before jQuery, so $() was not defined.

Here is the link:

https://jsfiddle.net/007zkvut/7/

It is working properly, just like in their website.

However, looking at the code you posted in your question and the code in your jsfiddle, there is a difference in the placement of <label>

In my updated jsfiddle I put another select to illustrate the difference between the different <label> placements. Just make sure it is after <select>

Solution 2

I have fixed the issues of select drop-down.

Please check the demo. https://jsfiddle.net/007zkvut/9/

Your demo: https://jsfiddle.net/007zkvut/8/

$(document).ready(function() {
 	$('select').material_select();
});

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">  
  <div class="row">
    <div class="input-field s6">      
      <select class="browser-default waves-effect waves-light btn">
          <option value="" disabled="" selected="">Choose your option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
       </select>
    </div>
  </div>
</div>

Solution 3

I experienced this problem too because my view was autogenerating from the javascript code. I solved this by calling the select() function from a setTimeout and after the code that generates the select DOM and it worked.

setTimeout(function(){$('select').material_select();},1000);

This same trick will also work for the materialize datepicker. just do.

setTimeout(function(){$('.datepicker').pickadate();},2000)

Solution 4

Well you can use the following code:

<div class="input-field col s12 m6">
    <select class="initialized">
        <option value="" disabled="" selected="">Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>

and, in your javascript file you need to put the next code:

(function($){
  $(function(){
    $(document).ready(function() {
        $('select').material_select();
      });
  });
})(jQuery);

and ta chan!, it works.

View more solutions