Issue with breakpoints
When I minimize the window at some point it shows email a little out of the section . How can I fix it . I've attached a picture of it ty.
8 Replies
you can set the column numbers for the section
https://filamentphp.com/docs/3.x/infolists/layout/grid#responsively-setting-the-number-of-grid-columns
I've already done that
I'm using columns(2) and also needs it to be in the same format as shown in picture
maybe limit the email
->limit(50)
but if the screen is small it cant fit 2 items in one row
how about use it like this?
In my case it is not fitting 2 items in one row on small screen
it happens when the screen is nest hub
You would have to fix this with css and changing the white space wrapping. Since it’s an email address and has no spaces it doesn’t know how to wrap it.
Seeing as how this is a badge though, wrapping isn’t going to look good either.
MDN Web Docs
word-break - CSS: Cascading Style Sheets | MDN
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
so what should I do if wrapping is not gonna work?
Wrapping will work it just won’t look great since the badge styling might wrap too. Could possibly target the badge and tell it to do the break word. That might look ok. But not sure what all styling is on the badge that might need to be overridden to make it work.
Easiest solution is to change the grid so it’s not 50/50.
Personally, at that screen width I would put the dates underneath. So change the grid one level up.