Hi,
I have had the same issue some long time ago, and I fixed it by upgrading the DataWidgets module.
Best!
Fjordi
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.
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;
}
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.
.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.
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.
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.