How does Form layout exactly work?

Question

I have a simple form, that looks as following:

the code:

<VBox class="sapUiSmallMargin">
    <sf:SimpleForm id="PayerSel" editable="true" layout="ResponsiveGridLayout" labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="12"
        adjustLabelSpan="false" emptySpanXL="5" emptySpanL="5" emptySpanM="5" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
        singleContainerFullSize="false">
        <sf:content>
            <Label text="Payers"></Label>
            <Input id="payerFrom" placeholder="From" required="true"/>
            <Input id="payerTo" placeholder="Until" required="true"/>
        </sf:content>
    </sf:SimpleForm>
</VBox>

The questions are:

• How to configure that both inputs have same length?
• When I change columnsL="1" to columnsL="4", why the input is getting smaller? I give more space and expect it to be wider, because I give to space.

Answer 1

According to the API:

• A new Title or Toolbar starts a new group (FormContainer) in the form.
• A new Label starts a new row (FormElement) in the form.
• All other controls will be assigned to the row (FormElement) that started with the last label.

The code exmple uses 1 group with 1 row.

columns<size> The layout will be divided into column columns in size

Without playing with spans here is an example for different columns, each column with 1 row and Label width + Input width + Input width = 2 + 5 + 5 in all size: (Plunker - try to resize the browser window and examine the result)

<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="PayerSel" editable="true"
                layout="ResponsiveGridLayout"
                labelSpanXL="0"
                labelSpanL="0"
                labelSpanM="0"
                labelSpanS="0"
                columnsL="1">
            <f:content>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
        <f:SimpleForm id="PayerSel2" editable="true"
                layout="ResponsiveGridLayout"
                labelSpanXL="0"
                labelSpanL="0"
                labelSpanM="0"
                labelSpanS="0"
                columnsL="2"
                columnsM="2">
            <f:content>
                <core:Title text="group1"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom2" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo2" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <core:Title text="group2"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom3" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo3" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
        <f:SimpleForm id="PayerSel3" editable="true"
                layout="ResponsiveGridLayout"
                labelSpanXL="0"
                labelSpanL="0"
                labelSpanM="0"
                labelSpanS="0"
                columnsL="3"
                columnsM="3">
            <f:content>
                <core:Title text="group1"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom32" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo32" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <core:Title text="group2"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom33" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo33" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <core:Title text="group3"/>
                <Label text="Payers">
                    <layoutData>
                        <l:GridData span="L2 M2 S2"/>
                    </layoutData>
                </Label>
                <Input id="payerFrom34" placeholder="From" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
                <Input id="payerTo34" placeholder="Until" required="true">
                    <layoutData>
                        <l:GridData span="L5 M5 S5"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
    </VBox>
</core:FragmentDefinition>