cancel
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 - SimpleForm not aligning labels

0 Kudos
1,236

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.

sergei-u-niq
Active Contributor
0 Kudos

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.

Accepted Solutions (0)

Answers (2)

Answers (2)

m_aguilera_zorzo
Explorer

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">
maheshpalavalli
Active Contributor
0 Kudos

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

0 Kudos

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