Bring Filter popup to the front, on top of grid

Question

I'm using the AG Grid Community for angular with Material and I'm facing the following issue with the column filter popup panel:

It's all fine when the filtered rows are more than 4 or 5 rows as the panel shows properly without cutting off. However, when the number of filtered rows gets fewer than 2 or even 3, the panel gets truncated. I have inspected the element and tried to find the selector for it but I can't seem to get the z-index set properly. I'm also hesitant to mess around with the overflow properties as the documentation sort of advises against it. The selectors I've tried to override in my styles.css (global) are ag-filter and ag-menu as well as ag-filter-body-wrapper - all to no avail.

I've read the documentation and there's no configuration for this as well. Is there some sass variable or something that I should be overriding instead?

Thanks in advance.

Answer 1

That behavior it is because the filter is showing within the container. Try setting the css position of the filter to fixed. This should allow to the filter to show over the container.

See this plunkr for more info

there is a div outer, like your table wrapper, and a box aka your filter:

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>

As you can see, the div is showing over the container.