Question

我喜欢创建一个带有几个输入字段的SAPUI5页面，其中一些输入字段中的一些是连续的，如下例所示：

https://plnkr.co/edit/jgkos97pTJNsKj1WQQZN?p=preview

<Page title="test" showNavButton="true" navButtonPress="onNavButtonPressed">
    <content>
        <Panel height="100%">
            <content>
                <l:Grid>
                    <l:content>
                        <VBox>
                            <Label text="test1" />
                            <Input value="test1"></Input>
                            <layoutData>
                                <l:GridData span="L6 M6 S6" />
                            </layoutData>
                        </VBox>
                        <VBox>
                            <Label text="test2" />
                            <Input value="test2"></Input>
                            <layoutData>
                                <l:GridData span="L6 M6 S6" />
                            </layoutData>
                        </VBox>
                        <VBox>
                            <Label text="test3" />
                            <Input value="test3"></Input>
                            <layoutData>
                                <l:GridData span="L6 M6 S6" />
                            </layoutData>
                        </VBox>
                        <VBox>
                            <Label text="test4" />
                            <Input value="test4"></Input>
                            <layoutData>
                                <l:GridData span="L6 M6 S6" />
                            </layoutData>
                        </VBox>
                        <VBox>
                            <Label text="test5" />
                            <Input value="test5"></Input>
                            <layoutData>
                                <l:GridData span="L12 M12 S12" />
                            </layoutData>
                        </VBox>
                        <VBox>
                            <Label text="test6" />
                            <Input value="test6"></Input>
                            <layoutData>
                                <l:GridData span="L12 M12 S12" />
                            </layoutData>
                        </VBox>
                    </l:content>
                </l:Grid>
            </content>
        </Panel>
    </content>
    <footer>
        <Bar>
            <contentRight>
                <Button text="weiter" type="Accept" />
            </contentRight>
        </Bar>
    </footer>
</Page>

但它没有响应，就像你在这里看到的那样：

如果我使用此示例中的表单： https://plnkr.co/edit/RRRBGYhQRVoY7ATouKmQ?p=preview

<Page title="test" showNavButton="true"
    navButtonPress="onNavButtonPressed">
    <content>
        <f:Form class="sapUiResponsiveMargin" editable="true">
            <f:layout>
                <f:ResponsiveGridLayout
                  labelSpanXL="3"
                    labelSpanL="3"
                    labelSpanM="3"
                    labelSpanS="12"
                    adjustLabelSpan="false"
                    emptySpanXL="4"
                    emptySpanL="4"
                    emptySpanM="4"
                    emptySpanS="0"
                    singleContainerFullSize="true" />
            </f:layout>
            <f:formContainers>
                <f:FormContainer>
                    <f:formElements>
                        <f:FormElement label="test1">
                            <f:fields>
                                <Input value="test1"></Input>
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement label="test2">
                            <f:fields>
                                <Input value="test2"></Input>
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement label="test3">
                            <f:fields>
                                <Input value="test3"></Input>
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement label="test4">
                            <f:fields>
                                <Input value="test4"></Input>
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement label="test5">
                            <f:fields>
                                <Input value="test5"></Input>
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement label="test6">
                            <f:fields>
                                <Input value="test6"></Input>
                            </f:fields>
                        </f:FormElement>
                    </f:formElements>
                </f:FormContainer>
            </f:formContainers>
        </f:Form>
    </content>
    <footer>
        <Bar>
            <contentRight>
                <Button text="weiter" type="Accept" />
            </contentRight>
        </Bar>
    </footer>
</Page>

响应：

但我必须在较小的设备上滚动。我如何结合这两个优点，以便我有一个响应式页面，在两个设备上都很好看，我不需要在较小的设备上滚动？

Answer 1

我也遇到了同样的问题，使用 sap.ui.Device.system 来概述这个问题来检查设备类型。也许它是另一种选择：

if(sap.ui.Device.system.tablet && !sap.ui.Device.system.desktop){
    ...tablet related commands...
}

https://openui5.hana.ondemand.com/#/api/sap.ui.Device.system

Answer 2

嗯，您可以使用网格代替表单布局：

https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.Grid

所以，不要把它作为一个表单，你只需在那里添加控件，然后你将不得不清理一点css，因为它不会被格式化为表单。

SAPUI5 - 响应式表单 - 一行中有多个列

2 个答案: