Layout on Sapui5 with Form and GridTable
<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>