materialize css select is not working properly
<p>I am trying to use select field in materialize css. But it doesn't seems work properly
<strong>my code :</strong></p>

<pre><code>&lt;div class="container"&gt;  
  &lt;div class="row"&gt;

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

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

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

    &lt;/script&gt;
</code></pre>

<p>And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:
<a href="https://i.stack.imgur.com/91i8o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/91i8o.png" alt="enter image description here"></a> </p>

<p>from <a href="http://materializecss.com/forms.html" rel="nofollow noreferrer">http://materializecss.com/forms.html</a> i have inspected where i founf this :</p>

<pre><code>&lt;div class="select-wrapper"&gt;
  &lt;span class="caret"&gt;▼&lt;/span&gt;
  &lt;input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text"&gt;
  &lt;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"&gt;
    &lt;li class="disabled"&gt;&lt;span&gt;Choose your option&lt;/span&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;span&gt;Option 1&lt;/span&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;span&gt;Option 2&lt;/span&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;span&gt;Option 3&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;select class="initialized"&gt;
    &lt;option value="" disabled="" selected=""&gt;Choose your option&lt;/option&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2"&gt;Option 2&lt;/option&gt;
    &lt;option value="3"&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>and from my code i am getting this from inspect:</p>

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

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

<p>Fiddle : <a href="https://jsfiddle.net/007zkvut/" rel="nofollow noreferrer">https://jsfiddle.net/007zkvut/</a></p>