How decrease the size of simple form and place in the middle of the screen

Question

I have the following simple form:

<Page title="{i18n>authorization}">
    <content>
        <VBox>
            <f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
                adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
                singleContainerFullSize="true">
                <f:content>
                    <Label text=""/>
                    <Text text="{i18n>userAuthorize}"/>
                    <Label text=""/>
                    <Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
                    <Label text=""/>
                    <Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
                        ariaDescribedBy="acceptButtonDescription genericButtonDescription">
                        <layoutData>
                            <FlexItemData growFactor="1"/>
                        </layoutData>
                    </Button>
                </f:content>
            </f:SimpleForm>
        </VBox>
    </content>
</Page>

and on the large screen, it stretches too width. What I would like that the simple form should take 4 columns width and place in the middle of screen.
How can I do it?

Answer 1

Try giving your VBox control a specific width. That way the SimpleForm will only fit that. In the VBox you can also add the alignItems="Center" attribute.

If you want to center controls and also not to the full width of the screen, you can do the following:

<VBox width="100%" alignItems="Center">
    <VBox width="50%" alignItems="Start">
        <!-- Content goes here... -->
    </VBox>
</VBox>

This way your controls will be centered and also only stretched to the width of the inner VBox.