Tailwind Dropdown menu Auto align not working?

[saiengagebay]

How can I replicate the Bootstrap 5 dropdown's automatic alignment in the Tailwind Dropdown, as it's not functioning as anticipated?

[wongjn]

What do you mean by "the Tailwind Dropdown"? Please consider providing a Tailwind Play that reproduces the undesired behavior you are experiencing. How would you like this dropdown aligned?

[saiengagebay]

https://play.tailwindcss.com/25XcR6hTEq

Updated Tailwind dropdown code not working auto alignment.

[wongjn]

Oh I see, you're talking about a Tailwind UI component, not Tailwind. So with this extra information and the screenshot of the Bootstrap example you provided in #13641 (comment), it seems you'd like for the dropdown menu itself to go up or down depending on its position in the viewport.

If you are using the HTML template, you'd need to adjust your JavaScript to work as you'd like – Tailwind UI does not come with JavaScript out of the box. If you are using the React or Vue versions, you may need to have some extra logic to again, swap the direction around when required.

[saiengagebay]

Yes, the Tailwind UI dropdown isn't functioning as expected in both React and Vue versions. Specifically, the dropdown menu should dynamically adjust its direction (up or down) based on its position within the viewport. Please refer to the attached screenshot for clarification.

[wongjn]

Ah OK, then it would seem you would need to implement that behavior in your own project.

[saiengagebay]

The implementation needs to be integrated directly into the Tailwind UI framework to ensure universal accessibility and usability for all users.

[saiengagebay]

Please check the ref bootstrap screenshot: https://snipboard.io/Shb9U4.jpg