I implemented a datepicker inside a popup, but even after applying overflow-y: auto; to the popup, its height does not expand when the datepicker is opened.
Hi @Ayushi Kumari ,
The popup doesn’t expand because the Flatpickr calendar is rendered with position: fixed, so it sits outside the normal layout flow. If you want the popup to grow, you need to render the calendar inline (for example, using inline: true), otherwise, the popup height will never be affected.
You can enable inline mode by using SetFlatpickrConfigs in the OnInitialize of the DatePicker.
Hi @Mihai MelencuI tried using this, but it causes the datepicker to remain open permanently
Hi @Ayushi Kumari ,I've put together a small demo to show you my implementation. Let me know if this is what you were looking for—the popup is sized so that the calendar doesn't get cut off.
Hi @Rui MendesI sincerely appreciate your response—it was very helpful.
I understood the problem clearly and even I have faced this problem. The solution that I have used is that I have added the below CSS
.flatpickr-calendar.date-picker-extended {
overflow-y: scroll;
height: 200px;
}
and then added the class "date-picker-extended" in DatePicker Extended class Property.
But note that you might need to adjust the Height for your use case.
This will work.
Thanks,
Sudip
Hi @Sudip PalThank you for your response. I implemented this approach, and while it was helpful, I ran into some responsiveness issues.ThankyouAyushi
Hey @Ayushi Kumari
If you need help to resolve the responsiveness problem, let me know.