Using OutSystems UI 2.26
issue with Z-indexing.
observable behaviour: dropdown doesn't open.
screenshots:
ServiceStudio, used in a list:
view
widget tree:
didn't mess with z-indexes. Did set min height on container holding the list, but that shouldn't be the issue
app view:
not opened:
Supposably Opened:
When playing with browser DEV tools, I have following observations:
Items are present in the HTML, (z-index / hidden / out of div scope?)
when unchecking a "position: absolute" checkbox, my list apears.
Screenshot DevTools play-around:
Could you look into it?
Potentially need to update the OutSystems UI - dependency version to cope
Kind regards,
Wouter
The LazyDropdownSearch dropdown is likely clipped because a parent container (e.g., the list or table with scrolling/min-height) has overflow: hidden or auto. This is a common CSS issue with absolute-positioned menus.
Add this CSS to the list container (via Extended Properties or custom class):
CSS -
overflow: visible !important;
This lets the dropdown overlay appear fully. (Test for any scrolling side effects.)
If needed, boost the dropdown's z-index (inspect the menu class in DevTools and add z-index: 9999 !important;).
Similar OutSystems dropdown clipping issue: https://www.outsystems.com/forums/discussion/72230/dropdown-widget-got-cut-now-full-showing/
please don't guide the bad css practice with !important
This discussion can share you some solutions by override css https://www.outsystems.com/forums/discussion/72257/css-overflow-question
True sorry for using !important, Maybe try with below solution -
Fix without !important:
Inspect the element clipping it in DevTools (hover to find the parent with overflow set).
Add a custom class to that parent container (e.g., the ListItem expression or outer container) and use this CSS (with higher specificity):
.your-parent-class,
.your-parent-class > div {
overflow: visible;
}
Or, if it’s the List widget itself:
Add class fix-list to the List and:
.fix-list .list-item {
This should let the dropdown escape without forcing anything. Test scrolling behavior.
If that doesn’t cut it, try increasing the dropdown menu’s z-index (inspect its class, e.g., .virtual-select-dropdown or similar):
.virtual-select-dropdown { /* confirm class in DevTools */
z-index: 1000;
Usually overflow is the root cause.
Yeah, thank you.
Its a good approach to inspect and troubleshoot the UI issue. Most of the cases are overflow, there are still some exceptional cases. But the developer mode is nice to get the issue
@Wouter Verbeeck ,
it's the list.
you'll have to override the OutSystems UI CSS
something like
.list.list-group.my-list { overflow : visible;}
I'd give this specific list the extra class 'my-list', that CSS is there for a reason (I hope), so only override it where it's needed.
Dorine