Hello folks,
I’ve been having a hard time trying to figure out a way to distribute the content inside a card arranged in a repeating group.
The desired state:
→ Each card is a cell of the repeating group.
→ Each card contain a header info (at top), a footer info (at bottom) and a description that can have one or more line (flexible number of lines) in the middle.
→ All the cards should have the same size, occupying the full height of the row. The space for the description of the larger text of the row would determine the maximum height of all cards of the same row.
I may be overcomplicating the issue, but I understand that I’m mixing the concepts of the “Align to the parent” (to place them at the top and bottom) with “column” stack of groups (to sum the heights and set the height of the highest card). Does it make any sense to follow this path?
Thanks for reading this!
Hi @charles_bubble ,
My understanding is that you make the parent group “Row” if you want the child groups to flow horizontally, similar to what you have there. I use “Column” when I want the child elements stacking vertically. I’m using “Align to Parent” when I want a very specific left/center/right layout, like in the header.
I am NOT an expert here and still trying to figure out how this new responsive engine works.
I think for you, you will want the parent to be “Row” so that these child groups flow horizontally. For the Card group, I’d probably try “column” so that the inner text boxes flow vertically.
Hey @manwithaplan , thanks for sharing!
At the end of the day, I ended up locking the maximum height of inside groups and using align to parent to position the elements accordingly: Basically creating a column group for header + description that is aligned to top and another column group for footer note + button that is alligned to bottom.
I don’t know if this is the best solution, so anyone else reading this post, feel free to drop other approaches for future reference.
