FlowPanel items having align-items: stretch

Anvil Q&A
1

What I’m trying to do:
I’m working with a flow panel that has items with varying text lengths. I want all the items in each row of the column panel to match the length of the longest item in that row. I’ve attempted to solve this by creating a CSS class for both the FlowPanel and individual items, setting properties like ‘display: flex’, ‘align-items’, ‘align-self: stretch’, and ‘height: 100%’. However, these solutions haven’t been effective due to the intricate ‘div’ structure generated by Anvil. If anyone with advanced CSS expertise has a straightforward fix, I’d greatly appreciate your input.

What I’ve tried and what’s not working:

.anvil-component.anvil-role-stretch-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%; /* Ensure the container takes the full width */
    height: 100%; /* Ensure the container takes the full height */
}

.anvil-component.anvil-role-stretch-flow > * {
    display: flex;
    flex-grow: 1;
    align-self: stretch;
    width: 100%; /* Ensure the children take the full width */
}
2

I sometimes call this function:

def set_equal_widths(*widgets, width = None):
    if width is None:
        width = max( w.width  for w in widgets )
    for w in widgets:
        w.width = width
1 Like
3

Originally, I was leaning towards using a function to adjust the height. But, being a bit of a perfectionist, I ran into a snag. When flexbox shifts elements to a new row, I’d like each element to match the height of the tallest one in that row. So, I gave it a shot using a CSS class and played with the align-item/align-self settings.