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.

[mjans]

Hi Ravi,

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

Kind regards,

Mark

[Former Member]

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.

[Former Member]

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

[setu_jha]

Had the same issue.

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

Thanks Roland

[avinash_kumar]

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