Hi @Rebecca Hall ,

I saw you already had some JS in the OnReady, but it wasn’t working, so I updated the implementation. Since Flatpickr officially exposes the position option, this approach is much more reliable than trying to fix it with CSS alone.

You’ll need to add an Extended Class to the Date Picker container (in my example I used js-fix-datepicker). In the OnReady event you can use:

• setTimeout(function () {
•   const input = document.querySelector('.js-fix-datepicker input');
•   input._flatpickr.set('position', 'above left');
•   input._flatpickr.redraw();
• }, 0);

Hi @Rebecca Hall,

You can try adding a handler from the DatePicker Initialized event 

and then calling the client action SetFlatpickrConfigs with position = "auto"

Bets Regards,
GM

Hi @Rebecca Hall 

This JavaScript can serve as an alternative solution. You may use it if it aligns with your needs. I’ve shared it for your reference. 

setTimeout(function () {

  document.querySelectorAll(".flatpickr-input").forEach(input => {

    if (input._flatpickr) {

      input._flatpickr.destroy();

      flatpickr(input, {

        position: "auto"

      });

    }

  });

}, 200);

Regards,

Vijay M.