Reputation: 5689
I am using:
<f:layout>
<f:ResponsiveGridLayout columnsM="1"/>
</f:layout>
and when I add many labels with texts:
<f:FormElement label="{i18n>va1}">
<f:fields>
<Text
text="{data>/customer/name}"
/>
</f:fields>
</f:FormElement>
then it looks like this:
label: text
label: text
label: text
label: text
and I would like to have this:
label:text label:text
label:text label:text
how can I achieve this?
@Edit
<Panel>
<my:FormPanel>
<f:Form id="id-form" editable="true">
<f:layout>
<f:ResponsiveGridLayout columnsM="1"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:title>
<Title text="title"/>
</f:title>
<f:formElements>
<f:FormElement label="lab1">
<f:fields>
<Text text="text1" />
</f:fields>
</f:FormElement>
<f:FormElement label="lab2">
<f:fields>
<Text text="text2" />
</f:fields>
</f:FormElement>
<f:FormElement label="lab3">
<f:fields>
<Text text="text3"/>
</f:fields>
</f:FormElement>
<f:FormElement label="lab4">
<f:fields>
<Text text="text4" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</FormPanel>
</Panel>
I was thinking about some grid layout or packing lab1 and lab2 to one container and lab3 and lab4 to another.
Upvotes: 0
Views: 591
Reputation: 2256
You can achieve it by using span
and layoutData
<VBox class="sapUiSmallMargin">
<f:Form editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="1"
emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0"
columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false" adjustLabelSpan="false"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Label">
<f:fields>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
<Text text="Label:" class="cLabel">
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</Text>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
</f:fields>
</f:FormElement>
<f:FormElement label="Label">
<f:fields>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
<Text text="Label:" class="cLabel">
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</Text>
<Text text="Text" >
<layoutData>
<l:GridData span="XL1 L2 M2 S4" />
</layoutData>
</Text>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</VBox>
CSS
.cLabel.sapMText {
color: #666;
}
Output
Note: Adjust the span
values as per your requirement
Upvotes: 1