Materialize: Label obscures select box

[frankwiles]

Not entirely sure if this is a bug or if I'm just doing something wrong. Markup source:

<form method="POST" action=".">
    ...
    <div class="row">
       <div class="input-field col s12">
           <select name="availability" required id="id_availability">
                <option value="0">Unknown</option>
                <option value="1">Available</option>
                <option value="2">Busy</option>
                <option value="3">Focusing</option>
                <option value="4" selected="selected">Unavailable</option>
                <option value="5">Bored</option>
                <option value="6">Vacation</option>
               <option value="7">Sick</option>
        </select>
        <label for="id_availability">Availability</label>
        <p class="help-block">Public availability</p>
        </div>
    </div>
</form>

And I have in the page:

 $('select').material_select();

It ends up displaying like this:

With the label overtop of the select box itself. Chrome Version 39.0.2171.95 (64-bit)

The select box does display when clicked (to the right of the label). Am I doing something off here?

[Dogfalo]

Don't use the input-field

 <div class="row">
       <div class="col s12">
        <label for="id_availability">Availability</label>
        <!-- <p class="help-block">Public availability</p> -->
           <select name="availability" required id="id_availability">
                <option value="0">Unknown</option>
                <option value="1">Available</option>
                <option value="2">Busy</option>
                <option value="3">Focusing</option>
                <option value="4" selected="selected">Unavailable</option>
                <option value="5">Bored</option>
                <option value="6">Vacation</option>
               <option value="7">Sick</option>
        </select>
        </div>
    </div>

[frankwiles]

Great thanks, was driving me nuts trying to figure out what I was doing wrong!