How to align Label and input field in a form?

[Former Member]

Hello Experts,

I've created a form and a smartform, but both of them cannot align Label and input fields perfectly(the label is always higher than field).

Here is the source code:

JS Bin - Collaborative JavaScript Debugging

var oFormContainer4 = new sap.ui.layout.form.FormContainer({

  expandable: false,

  formElements: [

  new sap.ui.layout.form.FormElement({

  label: "abc1",

  fields: [new sap.m.Input({

  id: "sField"

  })]

  }),

  new sap.ui.layout.form.FormElement({

  label: "abc2",

  fields: [new sap.m.CheckBox()]

  })

  ]

  });

  var oForm4 = new sap.ui.layout.form.Form({

              title:"Form4",

                                                      layout: new sap.ui.layout.form.ResponsiveGridLayout(),

  formContainers: [oFormContainer4]

  });

  var contentBox4 = new sap.m.VBox();

  contentBox4.addItem(oForm4);

oForm4.placeAt("content");

var oForm5 = new sap.ui.layout.form.SimpleForm  ({

  maxContainerCols:2,

  title:"Form5",

  content: [new sap.m.Label({text:"abc1"}), new sap.m.Input(),new sap.m.Label({text:"abcd2"}), new sap.m.Input(),new sap.m.Label({text:"abcd3"}),  new sap.m.CheckBox()]

  });

        oForm5.placeAt("content");

I have searched the SCN and found this:

But there's no answer for this discussion.

[Former Member · Accepted solution]

Hi Sihao,

Add property editable: true for Form

Change your code like this:

var oForm4 = new sap.ui.layout.form.Form({

              title:"Form4",

             layout: new sap.ui.layout.form.ResponsiveGridLayout(),

            formContainers: [oFormContainer4],

             editable: true

  });

Regards,

Devaarth

[Former Member · Accepted solution]

Thank you very much!

Now it works well:

JS Bin - Collaborative JavaScript Debugging