实现选择滚动问题答案

【问题标题】：Materialize select scrolling issue实现选择滚动问题
【发布时间】：2016-04-07 03:30:21
【问题描述】：

我正在开发一个使用带有很多选项的选择的网络应用程序。问题是某些选项在屏幕上看不到，因为 MaterializeCSS 的选择似乎是可滚动的。我该如何解决这个问题？

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

【问题讨论】：

你试过select{position:absolute}
@Pugazh 是的，但这没有任何效果
i.snag.gy/yYHNY.jpg - 所以物化选择是可滚动的我们的框。在您的位置，我会自己在他们的网站上进行检查，然后尝试找出我有什么不同以及为什么不同并尝试修复它
@mizurnix 尝试使用 firefox（之前使用 chrome）并且成功了。那么这一定是兼容性问题吗？随便试了一些手机浏览器，还是一样的问题
所以他们的例子在那个浏览器上也有同样的问题？我的屏幕截图来自 Win 10 Chrome。我可以确认我已经多次使用这些选择并且它们似乎工作正常并且具有跨浏览器的滚动条，包括 Android 上的 chrome 和至少一些 iOS 上的流行浏览器（不知道是哪个但没有听到测试人员在测试后抱怨iPhone 或者）

标签： html css materialize

【解决方案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;
}

【讨论】：

谢谢，这解决了问题...当可供选择的选项很少但下拉 UI 不完全可见时，这似乎是一个单一的问题。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

在另一个网站上发现了这个，所以我不能申请信用。 Final comment on this page

【讨论】：

【解决方案4】：

在 Materialise 版本 (1.0.0) 上遇到了相同的用例。我用以下方法修复了它。

.select-wrapper ul {
  overflow: auto;
}

【讨论】：

【解决方案5】：

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

body { overflow: auto !important; }

由于某种原因，在 select 上的 DOM 更改后调用 AutoInit 会在 body 标记中添加溢出：隐藏。

【讨论】：