Search code examples
htmlcssmaterialize

Materialize select scrolling issue


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?

enter image description here

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;
}

Solution

  •      .select-dropdown{
            overflow-y: auto !important;
        }
    

    Found this on another website so I can't claim credit. Final comment on this page