Skip to Content
0
Former Member
May 19, 2016 at 07:12 AM

How to align Label and input field in a form?

5025 Views

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.