将过滤器弹出窗口置于网格顶部

Question

我正在使用 AG Grid Community 来获取 Material 的角度，我在使用列过滤器弹出面板时遇到了以下问题：

当过滤的行超过 4 或 5 行时，这一切都很好，因为面板可以正常显示而不会中断。但是，当过滤的行数少于 2 甚至 3 时，面板会被截断。我检查了元素并试图找到它的选择器，但我似乎无法正确设置 z-index。我也犹豫要不要弄乱溢出属性，因为文档有点反对它。我尝试在我的 styles.css（全局）中覆盖的选择器是 ag-filter 和 ag-menu 以及 ag-filter-body-wrapper - 都无济于事。

我已阅读文档，也没有对此进行配置。是否有一些 sass 变量或我应该覆盖的东西？

提前致谢。

Answer 1

这种行为是因为过滤器显示在容器中。尝试将过滤器的 css 位置设置为 fixed。这应该允许过滤器显示在容器上。

更多信息请见this plunkr

有一个 div outer，就像你的表格包装器，还有一个盒子，也就是你的过滤器：

CSS：

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 255px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

HTML：

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
   
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    
  </p>
  <div class="box" id="one">One</div>
</div>

如您所见，div 显示在容器上方。