如何减小简单窗体的大小并放置在屏幕中间

Question

我有以下简单形式：

<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>

而且在大屏幕上，它拉伸得太宽了。我希望简单的形式应该采用 4 列宽度并放置在屏幕中间。
我该怎么做？

Answer 1

尝试为您的 VBox 控件指定特定的宽度。这样 SimpleForm 将只适合那个。在 VBox 中，您还可以添加 alignItems="Center" 属性。

如果您希望控件居中而不是整个屏幕宽度，您可以执行以下操作：

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

这样您的控件将居中并且仅拉伸到内部 VBox 的宽度。

如何减小简单窗体的大小并放置在屏幕中间

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

sapui5