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

Question

我在 angular 和 Material 中使用 AG Grid Community，我在列过滤器弹出面板中遇到以下问题：

当过滤的行超过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，就像你的 table 包装器，还有一个盒子也就是你的过滤器：

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 显示在容器上方。

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

Bring Filter popup to the front, on top of grid

css

ag-grid

angular

ag-grid-angular