Making full page responsive UI

Anvil Q&A
5

I’ve created a simple app that uses a role applied to a Column Panel to turn it into a column-oriented flexbox. Using a flexbox means you can choose how the items will be aligned vertically. You can also set the wrap_on property of the form itself to be never, otherwise the two panels will stack on small screens.

I created a column-flex role, applied it to the two ColumnPanels and added the following code to theme.css:

.anvil-role-column-flex {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
/*justify-content will be applied vertically because the flex direction is column*/
  justify-content: center;
}

Here is the clone link for the app: Anvil | Login

4 Likes