Vertically Center components next to each other

Anvil Q&A
1

What I’m trying to do:
Vertically align components while controlling their width relative to the container size. i.e. an image and a block of text side by side.

What I’ve tried and what’s not working:
First I tried the usual Anvil Designer route where I drag components next to each other and adjust their relative width. This works pretty well for components of similar height.

However, nearly every time I try to do this with a block of text next to an image, I get this problem of mismatched heights.

I have tried using a Flowpanel, which allows you to vertically center components. But you can only set absolute values for widths of components, or let the components resize themselves.

With the Flowpanel, I have tried setting a CSS rule to control the width of the image and the width of the text in relative terms like 60% and 40%. However, as noted in the forum (and in my experience), those relative widths end up being relative to the div containing the component, not the div that represents the entire width of the Flowpanel.

Ideally, I want to control how wide components in a Flowpanel are relative to the width of the Flowpanel container.

However I’m open to other approaches. Like…maybe I can vertically center elements within a Columnpanel?

1 Like
2

So far I’m settling for a gridpanel and a CSS role like this:

.anvil-role-gp-centered .row {
    display: flex;
    align-items: center;
}

However, grid panels are strict about positions in the sense that they don’t start a new row on smaller screens (makes sense). I have to use some form code to check if it is a mobile device and keep it responsive.

1 Like