Vertical label alignment in SAPUI5 (Label too high)

css label sapui5

Jonathan · Mar 11, 2015 · Viewed 12.6k times · Source

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

Answer

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

Vertical label alignment in SAPUI5 (Label too high)

Answer

Related questions