Form: make fields in the same row have the same length

Question

In this sap.ui.layout.form.SimpleForm, I have 2 controls in the same row. Right now, they're somewhat uneven without any formatting done to them. How do I make these 2 controls both occupy 50% of the total row space?

Answer 1

I think this can be seen in the following sample:

https://sapui5.hana.ondemand.com/#/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample.SimpleFormToolbar

Basically all controls have the aggregation <layoutData>. There you can add your own layout information:

<Input value="{ZIPCode}">
    <layoutData>
        <l:GridData span="XL2 L1 M3 S4" />
    </layoutData>
</Input>

Of course this also works for a Select.

Now you just have to determine what you want to pass to the span property:

Usually layouts are based on a 12 column grid. You have to assign some columns to your Labels, maybe some empty space at the end and the rest belongs to your Inputs or Selects.

Your SimpleForm will probably have these properties:

<f:SimpleForm layout="ResponsiveGridLayout"
    labelSpanXL="4"
    labelSpanL="4"
    labelSpanM="4"
    labelSpanS="12"
    emptySpanXL="0"
    emptySpanL="4"
    emptySpanM="0"
    emptySpanS="0">

So for XL you see that 4 columns already belong to the Label and 0 to empty space at the end so you have 8 columns left. Therefore both form controls should get 4 columns. L has 4 Label columns and 4 empty columns so each form control should get 2 columns. M is similar to XL. S already has 12 columns for the Label. Therefore your controls will be pushed into a second row below the Label where they each can use 6 columns.

So in that example I would suggest passing the following layoutData to both controls so they take equal space. If your SimpleForm has different values for label space end empty space then you have to recalculate.

<l:GridData span="XL4 L2 M4 S6" />

Remember to declare the l namespace at the beginning of your View so you can use the GridData control:

<mvc:View
    ...
    ...
    xmlns:l="sap.ui.layout">