Styling form to vertically and horizontally center column panel

Anvil Q&A
1

Hi there,

I’m creating a form to allow users to register for an account in my app.

I was wondering if there is a way to vertically and horizontally center a column panel with a Card role applied to it.

See image

Sign Up Page
Sign Up Page1280×765 187 KB

Thanks
SS

2

Perhaps you could do

card panel --> flow panel --> column panel

set the flow panel to center its components

and then just add a spacer top and bottom :thinking:…

3

Thanks @stucork

That is a potential solution I considered but I don’t want to hard code the vertical height at the top or bottom. Would be great if that was dynamic so that the page can resize its content based on the size of the browser window should the user resize the browser.

SS

4

I can’t think of a nice anvil solution without going into css…

Create a role for the FlowPanel called center-items

.anvil-role-center-items > .flow-panel-gutter {
    justify-content: center;
    align-content: center;
    min-height: 70vh;  /* 70 view port heights adjust as needed */
}

it might need a little more thought than that…

5

That’s waht worked for me, will leave it here if somebody needs it:

.anvil-role-center-items > .flow-panel-gutter {
    justify-content: center!important;
    align-content: center;
    min-height: 90vh;
}
1 Like
6

In your theme file include this:

.flow-panel>.flow-panel-gutter {
  align-items:center;
}

It overrides the original vertical alignment of all Anvil flow panels.
If you only want it to override it on your specific element, then add a role somewhere above as a parent to this flow panel:

.anvil-role-PARENT .flow-panel>.flow-panel-gutter {
  align-items:center;
}