实现选择滚动问题

Question

我正在开发一个使用带有大量选项的选项的网络应用程序。问题是在屏幕上看不到某些选项，因为MaterialiseCSS的select确实可以滚动。我该如何解决？

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

Answer 1

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

在另一个网站上找到这个，所以我不能要求信用。 Final comment on this page

Answer 2

请你在materialize.css找到.dropdown-content。

你看到max-height:650px并删除/更新它你想要下拉框大小。

我已经在我的项目中修复了这种风格。没关系！。谢谢.....

在materialize.css max-height:650px中删除/更新Before 属性之前

.dropdown-content {
    max-height: 650px;
}

我在materialize.css After中自定义max-height：250px

.dropdown-content {
    max-height: 250px;
}

Answer 3

以上都不适合我，但this did。

.dropdown-content {
   max-height: 350px !important;
   overflow-y: auto !important;
   backface-visibility: hidden !important;
}

Answer 4

在Materialise版本（1.0.0）上遇到相同的用例。我修复了以下内容。

.select-wrapper ul {
  overflow: auto;
}