You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I want to create a dynamic toast component and just realised the error messages could be any length long.
Thus, I need to have a fix width for the toast components.
For POC, i tried adding long data to toast's alert div. this resulted in a super long toast component that overflowed the page.
Thus, I tried to apply max-w-[35ch] to alert div and also tried to apply inline-block (as suggested by a StackOverflow answer) to span but the issue of text not wrapping still persisted.
Fix
However, i finally fixed it by adding text-wrap to the alert div.
Suggestions
But i believe this should be the default behaviour, cause too long toast element is bad UI. Please add it as default in future versions!
Also, as a default behaviour, i would like to have toast-end alerts to be end-aligned as well. this can be fixed by adding self-end to the alert div.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Issue
I want to create a dynamic toast component and just realised the error messages could be any length long.
Thus, I need to have a fix width for the toast components.
For POC, i tried adding long data to toast's alert div. this resulted in a super long toast component that overflowed the page.
Thus, I tried to apply
max-w-[35ch]
to alert div and also tried to applyinline-block
(as suggested by a StackOverflow answer) to span but the issue of text not wrapping still persisted.Fix
However, i finally fixed it by adding
text-wrap
to the alert div.Suggestions
But i believe this should be the default behaviour, cause too long toast element is bad UI. Please add it as default in future versions!
Also, as a default behaviour, i would like to have
toast-end
alerts to be end-aligned as well. this can be fixed by addingself-end
to the alert div.P.S. Here is a reproduction in TailwindCSS Play
Beta Was this translation helpful? Give feedback.
All reactions