It could be JavaScript, but it could also be some CSS rules interfering with the filter CSS rules applying the position. I see there’s quite some custom styling in this application. You can start by inspecting the filter element in your browser and checking if there are any CSS rules changing the position of the filter.

I think we finally found a solution for this one. It is not a perfect solution though and might not even help you specifically if you would ever have something similar.

 We have been using the GridSearch filters for several years now in our app and never really had this issue until recently when we created a dashboard page that has several list views and several filter panels. 

Before that we usually just had a filter panel and a list on the page and scrolling was not needed on these pages

Why do I mention scrolling? Well, it plays an important role as it turns out.

To display the dropdown with filter options the widget needs to know where to position the dropdown and it does that based on the position of the visible element using: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect. Now as you probably know getBoundingClientRect returns the position of an element relative to the viewport and that’s where it becomes interesting.

When clicking on the dropdown the widget will add a “ul” totally at the end of the “body” tag with top and left properties set. Now by default this “ul” will get position: absolute meaning it will be positioned relatively to the body (it’s parent) and that is where in our case it went wrong because some of the filters were a lot lower of the page.

We fixed it by giving it a “fixed” position but again, that might not work for you because then of course when you can scroll on the page after you open the filter the filter drop down will move…