如何使简单的表单响应？

Question

我做了一个简单的表格，定义如下：

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
    <VBox class="sapUiSmallMargin">
        <f:SimpleForm id="SimpleFormChange480_12120"
                editable="true"
                layout="ResponsiveGridLayout"
                title="Add New Employee"
                labelSpanL="4"
                labelSpanM="4"
                labelSpanS="12"
                adjustLabelSpan="false"
                emptySpanL="0"
                emptySpanM="0"
                emptySpanS="0"
                columnsL="1"
                columnsM="1"
                columnsS="1"
                singleContainerFullSize="false" >
            <f:content>
                <Label text="Employee Id">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="empid">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Employee Name">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="empname">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Email">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="email">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Department">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="department">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="City">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="city">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="State">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="state" >
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="District">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="district" >
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Address">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="address" >
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
    </VBox>
</core:FragmentDefinition>

我想我在定义 span 时犯了任何错误。我对大、中、小系统不太了解我认为我面临的主要问题是那个问题。

当我在 iPad 设备中检查响应时，它没有显示准确的响应，但我已经尝试过这种方式，任何人都可以帮助我使其响应。

Answer 1

根据您的要求(iPad)，表单未显示 3 列。您需要调整 span 值。

<VBox class="sapUiSmallMargin">
    <f:SimpleForm id="SimpleFormChange480_12120"
        editable="true"
        layout="ResponsiveGridLayout"
        title="Add New Employee"
        labelSpanL="4"
        labelSpanM="4"
        labelSpanS="12"
        adjustLabelSpan="false"
        emptySpanL="0"
        emptySpanM="0"
        emptySpanS="0"
        columnsL="1"
        columnsM="1"
        columnsS="1"
        singleContainerFullSize="false" >
        <f:content>
            <Label text="Employee Id">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="empid">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Employee Name">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="empname">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Email">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="email">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Department">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="department">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="City">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="city">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="State">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="state" >
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="District">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="district" >
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Address">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="address" >
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <!-- Select -->
            <Label text="Branch">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData> 
            </Label>
            <Select> 
                <layoutData> 
                    <l:GridData span="L2 M2 S12" /> 
                </layoutData> 
            </Select>
        </f:content>
    </f:SimpleForm>
</VBox>

输出 - iPad 带有标签跨度 2 和输入跨度 3

输出 - iPad 带有标签和输入跨度 2

如何使简单的表单响应？

How to make simple form responsive?

sapui5