title: materialize css select is not working properly
body: <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>