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=".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 .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 : /

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./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./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/007zkvut/

• javascript
• jquery
• html
• css
• materialize

• If possible share Jsfiddle of your code. – Sayed Rafeeq Commented Jun 22, 2016 at 6:50
• check out my edit @SayedRafeeq – Vicky Commented Jun 22, 2016 at 7:18
• @-Vicky, thank you. – Sayed Rafeeq Commented Jun 22, 2016 at 7:27
• I also had the label issue. The problem is when it's initialized it's not active. Just have to add the active class to the element after it finishes rendering. Should work fine. – Rajesh Barik Commented Dec 26, 2019 at 8:48

5 Answers 5

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

Here is the link:

https://jsfiddle/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>

I have fixed the issues of select drop-down.

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

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

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

<script src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare./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>

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)

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.

Place the label after the select tag. It should do the trick.