I thought I had a solid grasp on flex properties but I’m getting stumped with my current project. I am trying to make a simple calendar page, but I can’t figure out how to make a row have 7 children of the same width that stretch across the row’s full width but are not affected by any of their content’s sizes.
My hierarchy is:
Currently this is how the page looks:
The top row of “weekdays” is stretched past the parent’s width because the Label placed under the first element is stretching it’s “day” parent. The second row shows how the row will behave if I don’t add children to any of the “days”.
The flex properties for the root Visual Element, #Page:
For #Row1:
and each “day” button: (the 14.285% is 100% / 7 Days)
I’m sure I’m just not understanding something about how the flex properties work and would definitely appreciate any pointers. Thanks in advance!
Hi @squigglebucket !
It’s hard to give actionable pointers without actually playing around with it. To do this kind of element, I would probably try a column-first approach rather than a row one. It might be easier to force the width of each column to be the same across all rows.
If you are using Unity 2022.1 or a newer version, you should be able to achieve this using a MultiColumnListView. You would need to deal with selection in a specific way (both styling and date selection), but it would deal with the column widths automatically for you.
Hope this helps!
I think your specific case might work if you set the days widths to 0px, while leaving their min-width as 14.285%. The max-width value could be set to none if you want (which is the default).
The idea is that when their parent is calculating its own width, it won’t consider the width of children that have a width of 0px, and min-width will override the value of width when the children calculate their own width if width is less than min-width.
It’s one way of doing it; it tends to work in many different cases. Flex is very powerful as a layout paradigm, but it still inherits some of the finickiness that comes with CSS. Sometimes the way the rules interact with each other gets very complicated, so it’s hard to know for sure if this will work.
1 Like
Thank you both!
I fiddled with it a bit more and got it working based on @oscarAbraham 's guidance and am now using MultiColumnListViews elsewhere now that I know they exist hah 
1 Like
