I'm currently using the most up-to-date version of materializecss and have the following HTML code:
<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>
After implementing this code, the output is as follows: https://i.sstatic.net/MYRBa.png
Select does not appear at all, and when I add
<div class="row">
<button type="submit" class="waves-effect waves-light deep-orange darken-4 btn">Create</button>
</div>
below the select row, it overlaps with the select element:
https://i.sstatic.net/U4cn2.png
What could be causing this issue and how can it be resolved?