-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: long string in menu does not wrap in safari (with temp solution) #2862
Comments
Thank you @siraisisatoru
for reporting issues. It helps daisyUI a lot 💚
|
Hi contributors, hi community, We face the same issue. We use daisyUI, OSes and Browsers with the latest releases. Besides Safari and even Chrome on iPad the issue appears on FF latest SSR version 115.11.0esr (64-Bit). We tested on Windows, Linux and iOS machines. EDIT:
It should be easy to reproduce the issue. I have only a Next.js project with Tailwind/daisyUI configured. If you really need a reproducible, I'll provide it. But it would take me some time. Perhaps the code below is enough. If not, please let me know. A fix is important for us because we could not figure out a workaround and we go in production soon. Thanks for your attention and this great open-source project!
In plain HTML:
|
Okay, I found the workaround. Just set |
What version of daisyUI are you using?
v4.7.2
Which browsers are you seeing the problem on?
Chrome iOS + Safari Mac
Reproduction URL
https://daisyui.com/components/menu/#submenu
Describe your issue
Hello.
I am sorry that I didn't found #2626 and opened this issue.
I am currently working on a personal project that uses navbar-with-icon-at-start-and-end and embed drawer to the left most menu element in Navbar. It was functional beautifully until I had one of the strings in element become too long and not auto wrapping on my page using iOS Chrome. Then I investigated a bit by trial and error with my page by adding
w-52
(some other values that fit my design, applied to the outermostul
) to my menu element which I thought was meant to be not being wrapped as mentioned in #2182 which was an issue for dropdown element. The result remains the same with the long strong still making all elements expended and even over the edge of the drawer on iOS Chrome. In contrast, it works totally fine in Chrome on Mac. Then I guessed it maybe something related to iOS and thus I checked with other browsers and it seems it happened to Safari on Mac as well.The picture below shows the problem I tried to describe above. (They all run the same code by accessing localhost at the same time)
The story didn't end here. I further investigated the behaviour of the long element that caused the whole width using Safari inspector and I found there is
white-space:nowrap
from nowhere (I didn't set it manually).I guess it was somewhat other plugins messed it up locally. To prove this is my own issue, I tried to use Tailwind Play but it can not even load Daisyui on my end (Chrome and Safari on Mac).
As I what to wrap my text in sub-sub-sub menu, I found submenu which is similar to my case and can reproduce my cause. (Upper is Safari on Mac and below is Chrome on Mac.)
TL;DR
Issues:
menu
class does not work in Tailwind playProposed solution
Add
whitespace-normal
to theli
element to bring it back to normal.Thank you read through this long issue and hopefully we can have a clarification on the following.
menu
?)Thank you all maintainers! I love daisyui!
The text was updated successfully, but these errors were encountered: