5

I am currently working on my first SAPUI5 mobile application. I found the options for horizontal layout positioning, but my labels are shown "too high". For display I am using Google Chrome.

My page theme is sap_bluecrystal and the content structure is as follows:

sap.ui.layout.form.SimpleForm (Max Container Cols: 2)
--> sap.m.Label (Text: Name, LabelFor: "Name")
--> sap.m.Input (Id: "Name")

There are some more fields following the same structure. The result is:

Label too high

Has someone an idea how to solve this problem?

Thank you in advance, Best Regards, Jonathan

qmacro
  • 3,025
  • 23
  • 33
Jonathan
  • 75
  • 1
  • 1
  • 6
  • For readers with the same issue but in a **non-editable** form, see https://stackoverflow.com/a/59240253/5846045 or https://stackoverflow.com/a/62011529/5846045. – Boghyon Hoffmann May 26 '20 at 23:08

1 Answers1

17

You can use the editable property like this:

<f:SimpleForm id="form"
  editable="true">
  <f:content>
    <Label
      text="Name"
      labelFor="Name" />
    <Input id="Name"
      value="DJ" />
  </f:content>
</f:SimpleForm>

That should do what you need.

Here's an example (switch the switch to turn this on and off to see the effect).

qmacro
  • 3,025
  • 23
  • 33
  • Thank you so much! Even if I do not understand, why an "editable" property should do something about label alignment... strange feature in my opinion - or do I miss something? – Jonathan Mar 11 '15 at 09:46
  • 1
    In fact it seems to be a very strange way of handling the alignment, but on the other hand the SimpleForm does the most for you including alignment. The only information the SimpleForm needs is the current state (editable or not). – Tim Gerlach Mar 11 '15 at 10:16