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/