Vertically Justify Panel Items

Anvil Q&A
1

What I’m trying to do:
I am trying to create a custom panel with a minimum height (let’s say 300 px) with a header, content, and footer. The content height can be more than the minimum height and would need to auto expand the panel height, however, when the content has a height such that the combined height of the header, content, and footer is less than the minimum height I would like the header to be at the top and the footer to be at the bottom and the content in the middle (basically the exact same thing that a justified flow panel does, but vertically).

Example:
Vertical-Align Example

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

Code Sample:

.column-panel.anvil-role-vertical-justify .anvil-panel-row {
  align-content: space-between!important;
  align-items: center;
}

Clone link:
share a copy of your app

1 Like
2

Have you tried using a flexbox and setting the flex-direction to column? So something like this:

.anvil-role-vertical-justify {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 500px;
}

Let me know if that helps!

4 Likes
3

Brooke, you rock! The flex-direction did the trick!

1 Like