I'm working on a web app that uses a select with quite a number of options. The problem is some options cannot be seen on screen since MaterializeCSS' select does seem to be scrollable. How do I fix this?
HTML and PHP
<div class="main container">
<div class="section">
...
...
<div class="row">
<div class="input-field col s12 m8 offset-m2 l6 offset-l3">
<select>
<option value="" disabled selected>Choose a degree program</option>
<?php
foreach ($degrees as $degree){
echo '<option value="'.$degree.'">'.$degree.'</option>';
}
?>
</select>
<label>Degree program</label>
</div>
</div>
</div>
</div>
CSS
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1 0 auto;
}
.select-dropdown{
overflow-y: auto !important;
}
Found this on another website so I can't claim credit. Final comment on this page