Skip to Content
0
Nov 14, 2013 at 05:11 AM

Label alignment in responsive layout

2373 Views

Hi Experts,

https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/m/ResponsiveLayout.html

I am following the above link for designing a responsive layout, it is working fine but I have a label(Street) at the top of the input field I need to have the label (Street) at middle of the input with out using CSS. I am pasting my code below.

var oForm1 = new sap.ui.commons.form.Form("F1",{

layout: oLayout1,

formContainers: [

new sap.ui.commons.form.FormContainer("F1C1",{

formElements: [

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

label: new sap.m.Label({text:"Organization:",design:"Bold",textAlign : "Begin"}),

fields: [new sap.m.Input({value: "{beneficdetails>NameOrg}"})],

}),

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

fields: [icon2b,new sap.m.Label({text: "{beneficdetails>Communication/Telnr}"}) ],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

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

fields: [icon3b,new sap.m.Label({text: "{beneficdetails>Communication/Email}"}) ],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

})

],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

new sap.ui.commons.form.FormContainer("F1C2",{

formElements: [

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

label: new sap.m.Label({text:"Street:",design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

fields: [

new sap.m.Input({value: "{beneficdetails>Address/Street}"})],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

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

label: new sap.m.Label({text:"House No:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

fields: [

new sap.m.Input({value: "{beneficdetails>Address/HouseNum}"})],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

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

label: new sap.m.Label({text:"Postal Code:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

fields: [ new sap.m.Input({value: "{beneficdetails>Address/PostalCode}"})],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

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

label: new sap.m.Label({text:"City:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

fields: [ new sap.m.Input({value: "{beneficdetails>Address/City}"})],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

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

label: new sap.m.Label({text:"Country:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

fields: [ new sap.m.Input({value: "{beneficdetails>Address/Country}"})],

layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

]

}),

]

});

Thanks in Advance

Ravi Varma

Attachments