Мне нужно выровнять столбцы в <form:SimpleForm>. Мне нужно 4 столбца подряд, но выровнены только 2 столбца. Вот мой пример. Пожалуйста, обратитесь к JsBin.
Необходимый результат:
поле ввода метки поле ввода метки
текущий результат:
поле ввода метки
поле ввода метки
Чтобы использовать новый контейнер справа, просто установите пустой заголовок.
Но имейте в виду, что табуляция не будет слева направо, сверху вниз, а (для каждого контейнера) сверху вниз, слева направо. В конце концов, это просто SimpleForm ;-)
См. этот рабочий пример (пожалуйста, запустите пример на всю страницу, в противном случае он по-прежнему будет отображать поля в верхней части города из-за адаптивного характера):
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>