Hi everyone,
I’m seeking help regarding a persistent UI issue with the DatePicker component inside a Popup.
I am experiencing a problem where the DatePicker's calendar dropdown is appearing behind the Popup. My Popup has a custom style of z-index: 2000;. When I click the DatePicker, the calendar opens, but it is invisible or unclickable because it's being layered underneath the Popup container.
I have already tried the suggestions from older forum threads (such as adding .flatpickr-calendar.open { z-index: 9999 !important; } to the Theme or Screen CSS), but unfortunately, none of them worked for me.
Since many of those discussions are nearly 2 years old, I suspect that recent updates to OutSystems UI might have changed the underlying CSS classes or how the calendar is rendered in the DOM.
Has anyone encountered this recently? What was your resolution?
Is there a new specific class I should be targeting in the latest OutSystems UI?
Do I need to adjust the Position property or use a specific AdvancedFormat for Flatpickr to ensure it attaches to the correct container?
I am using the latest version of Service Studio and OutSystems UI. Any guidance would be greatly appreciated!
Thanks in advance!
link of the same issue : https://www.outsystems.com/forums/discussion/74822/datepicker-in-popup/
Hey @jesu verso
This happens because the DatePicker (Flatpickr) calendar is rendered outside the Popup DOM, causing a z-index conflict.
Working solutions (latest OSUI):
Use AdvancedFormat on the DatePicker and set:
{ "appendTo": document.body}
Or explicitly increase z-index for the correct class:
.flatpickr-calendar { z-index: 3000 !important;}
Prefer using OutSystems UI Popup (avoid custom z-index if possible).
The issue still exists in recent OSUI versions; it’s a CSS stacking context limitation, not a bug.
good morning sir thank you for giving your solution and now im trying it may i know sir where i can find the advanced format for datepicker? thank you
My Bad, in ODC / latest OutSystems UI, the DatePicker no longer exposes an AdvancedFormat property. That option existed in older UI versions and is now removed.
What to do instead (working approach):
Recommended fix: Add this CSS to your Theme:
If the issue persists, your Popup likely creates a new stacking context. In that case:
.osui-popup { overflow: visible !important;}
Note: Not the best approach, but it will work for your use case.