How to vertically-align M3 components

The new M3 theme is great, however, I am not sure how to correctly vertically-align some components. For example, when I add a switch in most cases I also need a label for it. In the official M3 documentation it is recommended to add the label to the same line and center both the label and the switch vertically:

image

Now in Anvil it seems such an alignment is not supported out of the box, at least I have not found a way to achieve this. For example:

image

I had to use hard-coded borders and margins throughout these three components that have to be vertically centered on one line. This does not feel right and might lead to different results in different browsers.

What is the official way in Anvil to vertically-align those components that belong together but have different heights?

1 Like

FlowPanels have a vertical_align property
If you add the label and switch inside a FlowPanel
then set the vertical_align to "middle" it should do what you want

5 Likes