How does Form layout exactly work?

I have a simple form, that looks as following:

enter image description here

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.

2 answers

  • answered 2018-01-12 11:15 omer.ersoy

    When you change columnsL="1" to columnsL="4", the input is getting smaller because "columnsL" attribute is stands for "The number of columns for large size". That means if you want 4 columns in your page and don't provide any width, every columns has width 25% of the parent component's width. Obviously they will be smaller than 1 column.

    link : more info

    Edit: You're using ResponsiveGridLayout in your simpleForm. If you want to your inputs have same width then just use "layoutdata".

    <Input id="payerFrom" placeholder="From" required="true">
       <layoutData>
            <l:GridData span="L4 M6 S12"/> //for example
       </layoutData>
    </>
    

  • answered 2018-01-12 11:15 Péter Cataño

    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>