formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
98 stars 3 forks source link

Problem with View and ViewItem columns #137

Closed NadimHallaq closed 1 year ago

NadimHallaq commented 1 year ago

There is a problem with the View and View Item, when creating a grid of 12 columns with direction="row". If I add the divider prop the columns will flex to the bottom rather than remain in 1 row, the only solution I found is to consider the grid an 11 column grid.

` <View width="100%" direction={"row"} divided>

` In this code example, the expected behaviour is a grid of 12 column, but when I add the last column (columns=2), it goes to the bottom, rather than remain horizontal. This only happens when you add the divided prop. Let me know if I'm doing something wrong, Thanks
blvdmitry commented 1 year ago

Thanks. I think that's indeed happening with dividers taking extra 2 px of the space. I think there is an easy fix for this I can ship, since dividers already support a blank flag which will make them take no space. I'll let you know once it's ready.

blvdmitry commented 1 year ago

Got it working, turned out to be a bit more complicated since the reason was getting 2 additional gaps when dividers are added. Since native gap doesn't handle percentage width (e.g. you can't set 2 columns with width: 50% and also have a gap), I've now added additional css calculations for the case when divided flag is used. Got one another documentation update to do and I'll ship a small patch tomorrow

image
blvdmitry commented 1 year ago

@NadimHallaq 1.13.1 is live now

NadimHallaq commented 1 year ago

Thank you Dmitry!