实现选择滚动问题

Question

我正在开发一个使用带有大量选项的选项的网络应用。问题是因为MaterialiseCSS＆＃39;而在屏幕上看不到一些选项。 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

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

以上两种方法都不适合我，但是this did。

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

Answer 4

在Materialize版本（1.0.0）上遇到了相同的用例。 我用以下方法修复了它。

.select-wrapper ul {
  overflow: auto;
}

Answer 5

如果它导致您的整个DOM锁定（对我而言），请添加：

body { overflow: auto !important; }

由于某些原因，在一次DOM更改后调用AutoInit会在主体标签中添加溢出：隐藏。