Noticed an issue with a date picker when used in a popup, for a specific screen width it will be rendered below the popup.
Normal screen width:
Date picker rendered properly
Small screen width: Below 1024px / desktop > tablet breakpoint
Date picker rendered below popup
Active z-index rule:
As you can see, the class inside-popup is not appended, which probably the root cause of this issue.
I've build a little screen you can fiddle with: PopupDatePicker. Using the default OS UI theme here, so no customisations that could cause this. Using Outsystems UI 2.22 here, was able to reproduce it on older versions as well.
Anyone else experiencing this problem?
Hi @Jan Wagenaar
This is a known issue that only impacts reactive web apps when the responsive value is on a Phone size and, that will be fixed on the next release under ROU-11689 (for future reference).
Meanwhile, as a quick workaround, it should be enough to add a call to the client action DatePickerToggleNativeBehavior setting IsNative=False on the Initialize event handler.
Hope it helps!
Cheers,GM
Okay thanks, that will do for now!
Hi @Jan Wagenaar ,
Go to the Theme CSS of your module and add this CSS code,
.os-internal-ui-datepicker
{ z-index: 9999 !important; }
This makes the date picker appears above the popup.
Thanks,
Sudha Narayanan
@Sudha Narayanan looking into internal CSS classes and using !important with such a random and high value is not really a good frontend practice.