Vertical label alignment in SAPUI5 (Label too high)

Question

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:

Has someone an idea how to solve this problem?

Thank you in advance, Best Regards, Jonathan

Answer 1

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).