title: Layout on Sapui5 with Form and GridTable
body: <p>I want to display Simpleform and Gridtable on the same Horizontal layout</p>
  <p>That is my XML view:</p>
  <pre><code>&lt;mvc:View
      controllerName=&quot;sap.ui.demo.cart.view.DcpFicheVente&quot;
      class=&quot;sapUiSizeCompact&quot;
      xmlns=&quot;sap.ui.table&quot;
      xmlns:mvc=&quot;sap.ui.core.mvc&quot;
      xmlns:l=&quot;sap.ui.layout&quot;
      xmlns:f=&quot;sap.ui.layout.form&quot;
      xmlns:u=&quot;sap.ui.unified&quot;
      xmlns:core=&quot;sap.ui.core&quot;
      xmlns:m=&quot;sap.m&quot;
      &gt;
      &lt;l:Grid defaultSpan=&quot;L7 M7 S7&quot; class=&quot;sapUiSmallMarginTop sapUiSmallMargin&quot;&gt;
      &lt;l:content&gt;
              &lt;f:SimpleForm id=&quot;SimpleFormChange472&quot;
  
                            maxContainerCols=&quot;2&quot;
                            editable=&quot;true&quot;
                            layout=&quot;ResponsiveGridLayout&quot;
                            labelSpanL=&quot;3&quot;
                            labelSpanM=&quot;3&quot;
                            emptySpanL=&quot;0&quot;
                            emptySpanM=&quot;0&quot;
                            columnsL=&quot;2&quot;
                            columnsM=&quot;2&quot;
                            adjustLabelSpan=&quot;false&quot;
                            class=&quot;editableForm&quot;&gt;
                  &lt;f:content&gt;
                      &lt;m:Label text=&quot;{ScreenModel&gt;/num_document}&quot; /&gt;
                      &lt;m:Input value=&quot;{SupplierName}&quot; &gt;
                          &lt;m:layoutData&gt;
                              &lt;l:GridData span=&quot;L3 M3 S3&quot; /&gt;
                          &lt;/m:layoutData&gt;
                      &lt;/m:Input&gt;
                      &lt;m:Label text=&quot;{ScreenModel&gt;/date_document}&quot; /&gt;
                      &lt;m:Input value=&quot;{Street}&quot;&gt;
                          &lt;m:layoutData&gt;
                              &lt;l:GridData span=&quot;L2 M2 S4&quot; /&gt;
                          &lt;/m:layoutData&gt;
                      &lt;/m:Input&gt;
                      &lt;m:Label text=&quot;{ScreenModel&gt;/date_livraison}&quot; /&gt;
                      &lt;m:DatePicker
                                  id=&quot;DP4&quot;
                                  value=&quot;{path:'/dateValue', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true}}&quot;
                                  class=&quot;sapUiSmallMarginBottom&quot;
                                  &gt;
                          &lt;m:layoutData&gt;
                              &lt;l:GridData span=&quot;L2 M2 S4&quot; /&gt;
                          &lt;/m:layoutData&gt;
                      &lt;/m:DatePicker&gt;
                      &lt;m:Label text=&quot;{ScreenModel&gt;/commercial}&quot; /&gt;
                      &lt;m:Select items=&quot;{      path: 'ScreenModel&gt;/commerciaux',
                                              sorter: { path: 'long_name' }
                                          }&quot;
                                          autoAdjustWidth=&quot;true&quot;&gt;
                          &lt;core:Item text=&quot;{ScreenModel&gt;long_name}&quot; key=&quot;{ScreenModel&gt;id}&quot; /&gt;
                      &lt;/m:Select&gt;
                      &lt;m:Label text=&quot;{ScreenModel&gt;/magasin}&quot; /&gt;
                      &lt;m:Select items=&quot;{      path: 'ScreenModel&gt;/store',
                                              sorter: { path: 'code' }
                                          }&quot;
                                          autoAdjustWidth=&quot;true&quot;&gt;
                          &lt;core:Item text=&quot;{ScreenModel&gt;code} -  {ScreenModel&gt;description}&quot; key=&quot;{ScreenModel&gt;id}&quot; /&gt;
                      &lt;/m:Select&gt;
  
                      &lt;m:Label text=&quot;{ScreenModel&gt;/client}&quot; /&gt;
                      &lt;m:Input value=&quot;{SupplierName}&quot; liveChange=&quot;onClient&quot; &gt;
                      &lt;m:layoutData&gt;
                          &lt;l:GridData span=&quot;L2 M2 S4&quot; /&gt;
                      &lt;/m:layoutData&gt;
                      &lt;/m:Input&gt;
                      &lt;m:Label text=&quot;Street/No.&quot; /&gt;
                  &lt;m:Input value=&quot;{Street}&quot;&gt;
                      &lt;m:layoutData&gt;
                          &lt;l:GridData span=&quot;L2 M2 S4&quot; /&gt;
                      &lt;/m:layoutData&gt;
                  &lt;/m:Input&gt;
                  &lt;m:Input value=&quot;{HouseNumber}&quot;&gt;
                      &lt;m:layoutData&gt;
                          &lt;l:GridData span=&quot;L2 M2 S4&quot; /&gt;
                      &lt;/m:layoutData&gt;
                  &lt;/m:Input&gt;
                  &lt;m:Label text=&quot;ZIP Code/City&quot; /&gt;
                  &lt;m:Input value=&quot;{ZIPCode}&quot;&gt;
                      &lt;m:layoutData&gt;
                          &lt;l:GridData span=&quot;L2 M2 S4&quot; /&gt;
                      &lt;/m:layoutData&gt;
                  &lt;/m:Input&gt;
                  &lt;m:Input value=&quot;{City}&quot; /&gt;
                  &lt;m:Label text=&quot;Country&quot; /&gt;
                  &lt;m:Select width=&quot;100%&quot;&gt;
                      &lt;m:items&gt;
                          &lt;core:Item text=&quot;Germany&quot; /&gt;
                          &lt;core:Item text=&quot;USA&quot; /&gt;
                          &lt;core:Item text=&quot;England&quot; /&gt;
                      &lt;/m:items&gt;
                  &lt;/m:Select&gt;
                     
                  &lt;/f:content&gt;
              &lt;/f:SimpleForm&gt;
          &lt;Table
                  id=&quot;table1&quot;
                  selectionMode=&quot;MultiToggle&quot;
                  rows=&quot;{/ProductCollection}&quot;
                  visibleRowCount=&quot;7&quot;
                  showColumnVisibilityMenu=&quot;{ui&gt;/showVisibilityMenuEntry}&quot;
                  enableColumnFreeze=&quot;{ui&gt;/showFreezeMenuEntry}&quot;
                  enableCellFilter=&quot;{ui&gt;/enableCellFilter}&quot;
                  columnSelect=&quot;onColumnSelect&quot;
                  cellContextmenu=&quot;onProductIdCellContextMenu&quot;
                  ariaLabelledBy=&quot;title&quot;&gt;
              &lt;toolbar&gt;
                  &lt;m:Toolbar&gt;
                      &lt;m:Title id=&quot;title1&quot; text=&quot;Products&quot;&gt;&lt;/m:Title&gt;
                      &lt;m:ToolbarSpacer/&gt;
                      &lt;m:ToggleButton
                              icon=&quot;sap-icon://show&quot;
                              tooltip=&quot;Enable / Disable Visibility Menu Entries&quot;
                              pressed=&quot;{ui&gt;/showVisibilityMenuEntry}&quot;/&gt;
                      &lt;m:ToggleButton
                              icon=&quot;sap-icon://resize-horizontal&quot;
                              tooltip=&quot;Enable / Disable Freezing Menu Entries&quot;
                              pressed=&quot;{ui&gt;/showFreezeMenuEntry}&quot;/&gt;
                      &lt;m:ToggleButton
                              icon=&quot;sap-icon://grid&quot;
                              tooltip=&quot;Enable / Disable Cell Filter&quot;
                              pressed=&quot;{ui&gt;/enableCellFilter}&quot;/&gt;
                  &lt;/m:Toolbar&gt;
              &lt;/toolbar&gt;
              &lt;columns&gt;
                  &lt;Column
                          id=&quot;name1&quot;
                          width=&quot;11rem&quot;
                          sortProperty=&quot;Name&quot;
                          filterProperty=&quot;Name&quot;
                          showFilterMenuEntry=&quot;true&quot;
                          showSortMenuEntry=&quot;true&quot;&gt;
                      &lt;m:Label text=&quot;Product Name&quot; /&gt;
                      &lt;template&gt;
                          &lt;m:Text text=&quot;{Name}&quot;/&gt;
                      &lt;/template&gt;
                  &lt;/Column&gt;
                  &lt;Column
                          id=&quot;productId1&quot;
                          filterProperty=&quot;ProductId&quot;
                          sortProperty=&quot;ProductId&quot;
                          width=&quot;11rem&quot;&gt;
                      &lt;m:Label text=&quot;Product Id&quot; /&gt;
                      &lt;template&gt;
                          &lt;m:Text text=&quot;{ProductId}&quot;/&gt;
                      &lt;/template&gt;
                  &lt;/Column&gt;
                  &lt;Column
                          id=&quot;image1&quot;
                          width=&quot;9rem&quot;
                          columnMenuOpen=&quot;onColumnMenuOpen&quot;&gt;
                      &lt;m:Label text=&quot;Image&quot; /&gt;
                      &lt;template&gt;
                          &lt;m:Link text=&quot;Show Image&quot; href=&quot;{ProductPicUrl}&quot; target=&quot;_blank&quot;/&gt;
                      &lt;/template&gt;
                  &lt;/Column&gt;
                  &lt;Column
                          id=&quot;quantity1&quot;
                          width=&quot;6rem&quot;
                          hAlign=&quot;End&quot;
                          sortProperty=&quot;Quantity&quot;&gt;
                      &lt;m:Label text=&quot;Quantity&quot; /&gt;
                      &lt;template&gt;
                          &lt;m:Label text=&quot;{
                              path: 'Quantity',
                              type: 'sap.ui.model.type.Integer'
                          }&quot; /&gt;
                      &lt;/template&gt;
                      &lt;menu&gt;
                          &lt;u:Menu ariaLabelledBy=&quot;quantity&quot;&gt;
                              &lt;u:items&gt;
                                  &lt;u:MenuItem
                                          text=&quot;My custom menu entry&quot;
                                          select=&quot;onQuantityCustomItemSelect&quot;
                                          /&gt;
                                  &lt;u:MenuItem
                                          text=&quot;Sort&quot;
                                          select=&quot;onQuantitySort&quot;
                                          icon=&quot;sap-icon://sort&quot;
                                          /&gt;
                              &lt;/u:items&gt;
                          &lt;/u:Menu&gt;
                      &lt;/menu&gt;
                  &lt;/Column&gt;
                  &lt;Column width=&quot;9rem&quot;&gt;
                      &lt;m:Label text=&quot;Delivery Date&quot; /&gt;
                      &lt;template&gt;
                          &lt;m:Text text=&quot;{
                              path: 'DeliveryDate',
                              type: 'sap.ui.model.type.Date',
                              formatOptions: {source: {pattern: 'timestamp'}}
                          }&quot;/&gt;
                      &lt;/template&gt;
                  &lt;/Column&gt;
              &lt;/columns&gt;
              &lt;footer&gt;
                  &lt;m:Toolbar&gt;
                      &lt;m:ToolbarSpacer/&gt;
                      &lt;m:Button
                              icon=&quot;sap-icon://hint&quot;
                              tooltip=&quot;Show information&quot;
                              press=&quot;showInfo&quot;/&gt;
                  &lt;/m:Toolbar&gt;
              &lt;/footer&gt;
          &lt;/Table&gt;
      &lt;/l:content&gt;
  &lt;/l:Grid&gt;
  
  &lt;/mvc:View&gt;
  </code></pre>
  <p>I want to display the form on 7 and the table on 5.
  The problem is that whan i did defaultSpan = 7, even the table take this place and come on another line.</p>
  <p>If i did 6, this at the same line but the label and the text of all field not come at the same line.</p>
  <p>How can I do that.
  I have 2 possibilities but i don't know how to do them.
  1] To put the table only on 5 grid cells
  2] To put default span on 6 and to let the label of forms at the same line with the text field.</p>
  <p>My result when defaultspan to 7: On two levels</p>
  <blockquote>
  <p><a href="https://i.stack.imgur.com/vuIz9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vuIz9.png" alt="Not at the same level" /></a></p>
  </blockquote>
  <p>But if i put on 6 i have on One level form and table but into the form the field and label on 2 levels:</p>
  <blockquote>
  <p><a href="https://i.stack.imgur.com/qSIcx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qSIcx.png" alt="Look at the label of the fiels" /></a></p>
  </blockquote>
  <p>Thanks Experts</p>