Skip to Content
avatar image
Former Member

Form in a grid layout

Hi,

I use a form with two columns in a horizontal alignment as in the example:

https://sapui5.hana.ondemand.com/#/sample/sap.ui.layout.sample.Form354wideDual/preview

Per default, all forms in my page will be in a grid layout and this breaks the form layout. Instead two columns next to each other, they align under each other.

I appreciate some recommendations to solve this issue.

Regards

Duygu

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Feb 01 at 09:43 AM

    The code looks like this:

    new sap.ui.layout.Grid({
        content:[
    	 new sap.m.VBox({
    		items:[
    		   new sap.ui.layout.form.Form({
    			editable : false,
    			layout : new sap.ui.layout.form.ResponsiveGridLayout ({
    				labelSpanXL : 2, labelSpanL : 2, labelSpanM : 4, labelSpanS : 12,
    				adjustLabelSpan: false,
    				emptySpanXL : 0, emptySpanL : 0, emptySpanM : 0, emptySpanS : 0,
    				columnsXL : 2, columnsL : 2, columnsM : 2, 
    				singleContainerFullSize:false
    			}),
    			formContainers : [
    				new sap.ui.layout.form.FormContainer({title: "title1",
    					formElements : new sap.ui.layout.form.FormElement({label:"Name1", fields:[new sap.m.Label({text: "bajls1"})]})
    				}),
    				new sap.ui.layout.form.FormContainer( {title: "title2,",
    					formElements : new sap.ui.layout.form.FormElement({label:"Name2", fields:[new sap.m.Label({text: "bajls2"})]})
    				})
    			]
    		}) ]
    	}) ]
     })
    
    Add comment
    10|10000 characters needed characters exceeded

    • can you check in developer tool if your form is taking full width of your screen´╝č

      can you remove the outer part to try again?

      newsap.ui.layout.Grid({
          content:[newsap.m.VBox({
      		items:[
  • Jan 31 at 05:49 PM

    where is your code?

    Add comment
    10|10000 characters needed characters exceeded