实现 select 滚动问题

Question

我正在开发一个网络应用程序，它使用 select 和相当多的选项。问题是有些选项在屏幕上看不到，因为 MaterializeCSS' 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 和 remove/update 您想要下拉框的大小。

我已经在我的项目中修复了这个样式。没关系！。谢谢.....

在removed/updated之前max-height:650px属性在materialize.css Before

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

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

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

Answer 5

如果它导致整个 DOM 锁定（对我来说），请添加：

body { overflow: auto !important; }

由于某种原因，在 select 上的 DOM 更改后调用 AutoInit 将 overflow:hidden 添加到 body 标签。

实现 select 滚动问题

Materialize select scrolling issue

html

css

materialize