How to make simple form responsive?

Question

I have made a simple form which is defined below:

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

I guess I am doing any mistake in defining the span. I don't have much idea on large, medium and small systems I think the main problem I am facing is in that issue.

When I am checking the responsive in iPad device it's not showing exact responsive, but I have tried in this way can anyone help me to make it as responsive.

Answer 1

As per your requirement(iPad), the form was not showing 3 columns. You need to adjust the span values.

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

Output - iPad with label span 2 and input span 3

Output - iPad with label and input span 2