Hello Guys,
I am trying to implement an integration app with Anvil for Cloudblue Connect and there we have a custom login page with specific requirements which are mainly responsive and full page. Here is an example of such UI:
Note: the white spot on the left column is an icon.
Now the problem is I am not able to set the background color of half of the page as the primary color with a logo restricted by CSS provided by Anvil. I can do that with spaces and all but the requirement of being responsive will be compromised. Could you please suggest to me anything related to this?
I’m not sure I understand what you are asking. You say you are “not able to set the background color of half of the page as the primary color with a logo restricted by CSS provided by Anvil.” Does it help to know that you can change the CSS of an Anvil site?
We are not targeting mobile devices but we want to consider tablets (low/high resolution), laptops(low/high resolution) and hight end resolution displays. We want to have the same look for different low resolution devices as well like get background color for half of the page with icon at the vertically and horizontally center and the form also at the vertically and horizontally center. Placing things at horizontally center is easy but somehow Anvil is restricted us from putting icon and form at vertically center of the page.
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;
}
