Question Re: SAPUI5 - SimpleForm not aligning labels in Technology Q&A

SAPUI5 - SimpleForm not aligning labels

Former Member — Sun, 04 Oct 2020 09:34:11 GMT

I'm trying to display some information through a SimpleForm but I can't align labels to the respective elements.

This is what I'm trying to do:

This is what I get:

This is the XML code of the form:

<form:SimpleForm
    layout="ResponsiveGridLayout"
    labelSpanS="6"
    labelSpanL="6"
    labelSpanM="6"
    labelSpanXL="6">
    <form:content>
        <Label
            text="Mostra per"/>
        <Select>
            <core:Item text="Colore" />
            <core:Item text="Codice" />
        </Select>
        <Label
            text="Scegli un colore"/>
        <f:GridList>
            <f:customLayout>
                <grid:GridBoxLayout boxWidth="20px"/>
            </f:customLayout>
            <CustomListItem>
                <VBox width="20px" height="20px" class=".whiteColor"/>
            </CustomListItem>
            <CustomListItem>
                <VBox width="20px" height="20px" class=".redColor"/>
            </CustomListItem>
            <CustomListItem>
                <VBox width="20px" height="20px" class=".blueColor"/>
            </CustomListItem>
        </f:GridList>
        <Label text="Disponibilità"/>
        <ObjectNumber number="2"/>
        <Label
            text="Usata"/>
        <CheckBox/>
        <Label
            text="Prezzo Listino minimo"/>
        <ObjectNumber number="10000" unit="€" />
    </form:content>
</form:SimpleForm>

I'm definitely doing something wrong.

Thanks in advance.

Re: SAPUI5 - SimpleForm not aligning labels

maheshpalavalli — Mon, 05 Oct 2020 05:32:01 GMT

I can see that you have given labelSpanS/M/L as 6, it means that it occupies half of the space(out of a total 12).

Now try giving emptySpanS/M/L as 0, so there will be no empty space and try again manipulating the labelSpanS/M/L to get the desired output.

If the screenwidth itself is less then automatically text will flow down, and we cannot do anthing for that.

Regards.

Mahesh

Re: SAPUI5 - SimpleForm not aligning labels

Former Member — Mon, 05 Oct 2020 08:16:42 GMT

I tried setting emptySpans to 0 and it's better but I still have problem with labels not aligning.

Re: SAPUI5 - SimpleForm not aligning labels

sergei-u-niq — Mon, 05 Oct 2020 09:40:07 GMT

assuming, you are speaking about the vertical allignment of Usata and Checkbox, please have a look if it aligns correctly with SAP Standard Themes. If it does, you have a problem in your custom theme.

Re: SAPUI5 - SimpleForm not aligning labels

m_aguilera_zorzo — Mon, 18 Oct 2021 09:25:04 GMT

Try to user Form property "editable".
Set it to true, it should solve the problem.

<form:SimpleForm
    layout="ResponsiveGridLayout"
    editable="true"
    labelSpanS="6"
    labelSpanL="6"
    labelSpanM="6"
    labelSpanXL="6">