Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-Day-Picker popup position

In the React-Day-Picker project, is there a way to change the position of the DayPicker popup? I have a DayPickerInput on the far right of my view, and the DayPicker then opens left aligned with the Input, but this makes the DayPicker get cropped by the edge of my window.

Is there a way to make the DayPicker be right aligned with the Input and have it overflow to the left, so that it won't get cut off by the edge of my window?

Right now it looks like this
(the dots are the input)
     ....._____
     |         |
     |         |
     |         |
     |_________|
and I want it to look like this
 _____.....
|         |
|         |
|         |
|_________|
like image 249
Deeks Avatar asked Jun 07 '26 06:06

Deeks


1 Answers

After some struggle I managed to reproduce partially the markup of the datepicker, with some dummy content inside:

enter image description here

This way we can see the styles that are being applied to the datepicker. So, with some overrides in the CSS we can achieve the desired result:

enter image description here

Hope this helps :)

like image 81
pesho hristov Avatar answered Jun 09 '26 00:06

pesho hristov