I have a date picker component made with a tailwind and alpine js, I used this as my reference to my date picker. My problem is the mobile responsiveness when I'm on a small device the date picker just overflows in the remaining space at the bottom. is there any way to add like a smart dropdown that goes up when there's no space at the bottom?
I also tried putting media queries when in small devices, but it doesn't suit my needs.
The only reliable way to solve this issue, would be to calculate the position of your element relative to the viewport. For that you'd use
const pos = element.getBoundingClientRect()
and then you could calculate the remaining space to the top / bottom like
const offsetTop = pos.top
const offsetBottom = window.innerHeight - pos.bottom
When opening the datepicker you have to run this code and decide whether your element will fit within the pixel-value stored in offsetBottom, otherwise you open it upwards or some other logic.