Label alignment in responsive layout

[Former Member]

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

[Former Member · Accepted solution]

Hi,

any news? Is you issue solved?

Regards,

Marc

[Former Member · Accepted solution]

Hi Marc,

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

Set this below property.

padding-top: 10px;

[Former Member · Accepted solution]

Hi Ravi,

thanks for your fast reply.

Regards.