【问题标题】:Bring Filter popup to the front, on top of grid将过滤器弹出窗口置于网格顶部
【发布时间】:2020-11-11 19:29:47
【问题描述】:

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

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

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

提前致谢。

【问题讨论】:

    标签: css angular ag-grid ag-grid-angular


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

    【讨论】:

    • 感谢您的回答。我不得不在这里和那里调整一些东西,但你的固定位置的一般方法起到了作用。
    猜你喜欢
    • 1970-01-01
    • 2010-10-29
    • 1970-01-01
    • 1970-01-01
    • 2019-08-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多