Hello,

Could you please share a sample OML, or provide some guidance on your current setup and the steps required to reproduce the issue? 

Hello @Shivangi Thakur 

I am not sure there is a fix "without" using CSS.

If I am not mistaken, datepickers and popups have a long history of not working very well with each other. The most common issue is for the calendar to appear behind the popup. 

The reason is that the calendar itself is not being rendered as an element of the popup HTML. And in your case, this is probably why it scrolls with the page.

You can always investigate the CSS being applied to the calendar using the Developer tools in the browser and come up with a solution that can be implemented in a class in your application theme or in the style guide (inherited by the application theme), and apply the class to the widget or a container around it, in the same way you apply classes to other elements, centralizing your CSS instead of having it at the screen level. 

But this is definitely a CSS problem.

Cheers!

Please Share the OML if it is Possible 

Hi @Shivangi Thakur 

Use SetFlatpickrConfig and set Static property true. It will work.

Thanks,

Sudip

Hi @Shivangi Thakur ,

.my-popup .flatpickr-calendar {
    position: fixed;
} 
Use css on your container

Hi Shivangi,

This happens because the Date Picker pop-up is rendered inside the scrollable container, so it scrolls together with the screen.

You can fix this by using the “Show Date Picker On” property of the Date Picker / Input widget and making sure the popup is attached to the screen (or a non‑scrolling container), not to the scrollable popup content. Typical approaches are:

1. Use a non‑scrolling container for the Date Picker. Place the Date Picker in a container that is not inside the scrollable area of the popup (e.g. a header or fixed area of the popup). The calendar will then stay fixed while the popup content scrolls.

2. Override only the Date Picker popup CSS
   If you can’t change the layout, you can add a specific class to the Date Picker widget and override only that pop-up’s CSS (not screen‑level CSS). For example, in the Date Picker’s “Style Classes” add myDatePicker, then in your module’s CSS:

        .myDatePicker .flatpickr-calendar       

       {          

               position: fixed !important;             

                z-index: 9999;                                          

     } 

Then configure the widget to use this class for the calendar container.

Thanks, 

Arun

hi @Shivangi Thakur so you can close the calender when you scroll using javascript , bcz your calender element is outside the popup-content in the DOM.