CODEWITHSUNDEEP
javascriptresponsive-designtailwind-cssalpine.js
jasjamjos
jasjamjos

Reputation: 99

Make dropdown to drop up when theres no space at bottom ALPINE JS and TAILWINDCSS

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.

Upvotes: 2

Views: 1424

Answers (1)

pacman
pacman

Reputation: 315

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.

Upvotes: 1

Related Questions