Not all form inputs are fit into card

Question

I'm using the latest materializecss, and I have the following HTML:

<div class="container">

    <div class="section">

        <!-- Main content -->
        <div class="row">
            <div class="col s12 m12 l12">

                <div class="row">

        <div class="card col s12 m12 l6 offset-l3">
            <div class="card-content">
                <div class="row">
                    <form class="col s12 m12 l12" method="post" action="">

                        <!-- Name -->
                        <div class="row">
                            <div class="input-field col s12">
                                <i class="material-icons prefix">library_add</i>
                                <input id="name" type="text"
                                       name="name"
                                       required>
                                <label for="name">Campaign name</label>
                            </div>
                        </div>

                        <!-- Type -->
                        <div class="row">
                            <div class="input-field col s12">
                                <select id="type" name="type">
                                    <option value="cpm">CPM</option>
                                    <option value="cpc">CPC</option>
                                    <option value="cpi" disabled>CPI</option>
                                </select>
                                <label for="type">Campaign type</label>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>
            </div>
        </div>
    </div>

</div>

And, the result is following:

Select isn't displayed at all, and if I add

<div class="row">
   <button type="submit" class="waves-effect waves-light deep-orange darken-4 btn">Create</button>
</div>

after the select row, it will overlap the select:

Why and how to fix it?

Answer 1

Make sure you initialize select component(s).

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

Ref : Materializecss documentation on select-initialization