columnSpan not working as expected @ smaller screen sizes
With the colSpan settings depicted in picture A, I'm getting funny results on smaller screens shown in B and C. What could be wrong?
11 Replies
If you have 3 cols on a small screen, the form elements simply don't fit into that space.
They are just to hold max 2 digits each is why. 🙏 all the same
Yes. But they still don't fit as you can see 😅
Ok but then what explains the uneven sizing in screen B? The space in the fields for sure can contain many characters when you look at it viz-a-viz the one-letter label above each field.
Field C is smaller than fields R and U
I think you also need to set a size for
default. sm is the breakpoint after thatWhat method and argument do I use? Doesn't jump at me from the docs: would appreciate a link
Same method:
->columnSpan(['default' => 3, 'sm' => 3, 'lg' => 1])🙏
Fixed?
Yes thank you
To give a little detail: to achieve my responsive goals from default to XL screen size, I had to ->columns(12).
Yet with
['default' => 12...], the fields were overflowing right out of the repeater's outlined border (and that of the form itself) on my mobile phone. So I resorted to a hack:
['default' => 10...]
(despite it being a 12 column repeater) and it worked...until resizing further down using dev tools; likely not a size anyone would see anyway.
Still, is there not a setting to make the fields always respect borders by wrapping where necessary?Here's a screenshot
