Yal Yal - 5 months ago 289
CSS Question

how to have 4 columns in a row simpleform SAPUI5

I need to align columns in

<form:SimpleForm>
. I need 4 columns in a row but only 2 columns are aligned. Here is my example, Please refer JsBin

Needed output :

label input-field label input-field

current output :

label input-field

label input-field

Answer

To use a new container on the right, simply set an empty title.

But be aware tabbing won't be from left to right, top to bottom but (per container) top to bottom, left to right After all, it just a SimpleForm ;-)

See this working example (please run the example full-page, otherwise it will still show the fields top-town because of the responsive nature):

sap.ui.controller("view1.initial", {
    onInit : function() { }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:l="sap.ui.layout"
      xmlns:f="sap.ui.layout.form"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
        <f:SimpleForm
            maxContainerCols="2"
            editable="true"
            layout="ResponsiveGridLayout"
                labelSpanL="4"
                labelSpanM="4"
                emptySpanL="0"
                emptySpanM="0"
                columnsL="2"
                columnsM="2">
            <f:content>
                <core:Title text="A Title" />
                <Label text="1st label" required="true" />
                <Input value="Blah" />

                <core:Title text="" /> <!-- empty title so it looks like this container belongs to the left one -->
                <Label text="2nd label" required="true" />
                <Input value="Blah" />
            </f:content>
        </f:SimpleForm>
    </mvc:View>
</script>