Question Re: Label alignment in responsive layout in Technology Q&A

Label alignment in responsive layout

Former Member — Thu, 14 Nov 2013 05:11:38 GMT

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

Re: Label alignment in responsive layout

avinash_kumar — Fri, 15 Nov 2013 04:17:42 GMT

Hi Ravi,

Please use the Simple Form and it also has the responsive layout.

Here is the code snippet:

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

minWidth : 1024,

maxContainerCols: 2,

editable: true,

layout: "ResponsiveGridLayout",

labelSpanL:4,

labelSpanM:4,

columnsL:2,

columnsM:2,

content:[

new sap.ui.core.Title({text:"Content 1"}),

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

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

new sap.ui.core.Title({text:"Content 2"}),

new sap.m.Label({text : "Street", design : "Bold"}),

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

new sap.m.Label({text : "House No", design : "Bold"}),

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

new sap.m.Label({text : "Postal Code", design : "Bold"}),

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

new sap.m.Label({text : "City", design : "Bold"}),

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

new sap.m.Label({text : "Country", design : "Bold"}),

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

]

});

Thanks & Regards,

Avinash

Re: Label alignment in responsive layout

Former Member — Tue, 13 May 2014 09:34:27 GMT

Hi,

any news? Is you issue solved?

Regards,

Marc

Re: Label alignment in responsive layout

Former Member — Tue, 13 May 2014 09:53:00 GMT

Hi Marc,

I used custom CSS class to align that....

Set this below property.

padding-top: 10px;

Re: Label alignment in responsive layout

Former Member — Tue, 13 May 2014 09:54:53 GMT

Hi Ravi,

thanks for your fast reply.

Regards.

Re: Label alignment in responsive layout

mjans — Tue, 27 Jan 2015 08:34:49 GMT

Hi Ravi,

You have to make the form editable: true in the properties (just before layout: oLayout).

Kind regards,

Mark

Re: Label alignment in responsive layout

Former Member — Sat, 09 Jan 2016 15:14:10 GMT

try adding class="sapUiSmallMarginTop sapUiSmallMarginBottom" to your Label.

Re: Label alignment in responsive layout

setu_jha — Thu, 25 Feb 2016 16:49:26 GMT

Had the same issue.

Adding class="sapUiSmallMarginTop sapUiSmallMarginBottom" to my label worked fro me.

Thanks Roland

Re: Label alignment in responsive layout

Former Member — Mon, 08 Aug 2016 05:31:30 GMT

Hi,

I happen to see this thread as I was facing the same issue and this thread has not been answered.

You need to set property - editable:true of the form and that would resolve.

For your reference, you may follow this thread:

Regards,

Rashmi.