daisyui / react-daisyui

daisyUI components built with React 🌼
http://react.daisyui.com/
MIT License
954 stars 103 forks source link

dropdown goes offscreen #444

Closed WingsDevelopment closed 2 months ago

WingsDevelopment commented 6 months ago

besides no automatic changing classes from "dropdown" to dropdown so i was wondering is there a clean way to change class from just "dropdown" to "dropdown dropdown-end" for example.

is there at least a way to implement something like "dropdown dropdown-start md:dropdown-end" ? and make my dropdown behave in some other way in different devices?

I guess what i try to achieve is: @media (max-width: 640px) { .mobile-dropdown-end { @apply dropdown-end; } } but with tailwind..

benjitrosch commented 2 months ago

Your best bet and the more "Tailwind" approach for this would be to use the daisyUI classes with Tailwind's breakpoints (https://tailwindcss.com/docs/screens).

If you want to do that using this library, you would have to involve some amount of JS to read the screen size and adjust the props accordingly.