DataGrid2 Dropdown Filter Hidden Behind Sticky Columns in Mendix 10.24

0
Hi all,I’m facing an issue with DataGrid2 dropdown filters.ProblemI have sticky columns (z-index ~99)One column uses a dropdown filterWhen I open the dropdown, it gets hidden behind the grid rows/columnsObservationThis setup works fine in Mendix 9But the issue is happening in Mendix 10.24.20ExpectedDropdown should appear above the grid, not behind it.What we tried .widget-dropdown-filter-popover { z-index: 9999 !important; } .widget-datagrid-grid { overflow: visible !important; } .widget-dropdown-filter-popover { position: fixed !important; } I would like to understand the recommended approach to handle this scenario when using sticky columns together with dropdown filters.Thanks in advance!
asked
4 answers
0

Hi,
I have had the same issue some long time ago, and I fixed it by upgrading the DataWidgets module.

Best!
Fjordi

answered
0

Try inspecting the parent containers in DevTools. In Mendix 10, this is often caused by a stacking context or overflow clipping introduced by sticky columns rather than the dropdown's own z-index.

Even with:


.widget-dropdown-filter-popover {
    z-index: 9999 !important;
}

the dropdown can still be hidden if a parent container has overflow: hidden/auto, transform, or position: sticky.

Or try to update the data widgets.

answered
0

mendix 10.24.13

Atlas_Core The latest version supported by Mendix

Atlas_Web_Content The latest version supported by Mendix

DataWidgets 3.10

add style

.widget-datagrid-grid-head {

z-index: 1 !important;

}

answered
0

Hi,


This looks like a stacking-context issue between the sticky Data Grid 2 columns and the dropdown filter, rather than simply a missing z-index.


Data Grid 2 supports dropdown filters directly in column headers, and the current documentation still recommends using the dedicated Dropdown Filter widget for this scenario.

Since you are seeing the difference specifically after moving from Mendix 9 to 10.24.20, I would first test this with the current Data Widgets/Data Grid 2 module version, rather than trying to force the popup with position: fixed.


I would not recommend this as the main fix:


.widget-dropdown-filter-popover {
    position: fixed !important;
}

Changing the popup to fixed can actually make positioning relative to the grid/header unreliable, especially when the grid itself has scrolling/sticky elements.

Also, simply increasing the popup to z-index: 9999 does not necessarily solve the problem. If the sticky column and the popup are in different stacking contexts, a child with z-index: 9999 cannot escape its parent's stacking context.


What I would check first

  1. Update the Data Widgets module/Data Grid 2 to the latest version compatible with your Mendix version.
  2. Mendix has made several fixes around Data Grid 2 filter configuration in the 10.24 line, including fixes related to the migration of dropdown filter configuration.
  3. Remove the custom CSS temporarily:

.widget-dropdown-filter-popover {
    z-index: 9999 !important;
}

.widget-datagrid-grid {
    overflow: visible !important;
}

.widget-dropdown-filter-popover {
    position: fixed !important;
}

Then reproduce the issue with the standard widget styling. This helps determine whether the issue is coming from the custom sticky-column CSS or from Data Grid 2 itself.

  1. Check the CSS applied to the sticky columns. If the sticky columns are being given a high z-index such as 99, try reducing that value rather than continuously increasing the dropdown's z-index.

For example, if you have custom CSS similar to:


.my-sticky-column {
    position: sticky;
    z-index: 99;
}

test with a much lower stacking level.


The important point is that the dropdown should be in a stacking context above the sticky grid content, rather than trying to compensate with an arbitrarily large z-index.

One more useful test

Temporarily disable the sticky-column styling completely.

If:

Sticky columns OFF
        ↓
Dropdown works correctly

but:

Sticky columns ON
        ↓
Dropdown appears behind the grid

then you have a strong indication that the custom sticky-column CSS/stacking context is causing the problem.


If the problem still occurs with no custom CSS and the latest Data Grid 2/Data Widgets version, I would raise it with Mendix Support as a potential widget regression, because Data Grid 2 is a platform-supported widget and Mendix directs widget-related issues to Support.


So I would avoid trying to solve this by adding more !important, overflow: visible, or position: fixed. First isolate the stacking context created by the sticky columns and test against the latest Data Grid 2 version.


If you can share the CSS you currently use to make the columns sticky, that would be the first thing I'd look at — especially any position, z-index, overflow, transform, or contain rules.



answered