Two columns of labels in formContainers in OpenUI5
0
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.
xml layout sapui5
asked Nov 9 '18 at 7:40
Michu93
798728
add a comment |
0
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.
xml layout sapui5
asked Nov 9 '18 at 7:40
Michu93
798728
1
columnsM = "1" makes it one column, if you want 2 change it
– Jungkook
Nov 9 '18 at 12:32
@Jungkook that was first case which I tried
– Michu93
Nov 9 '18 at 12:34
Possible duplicate of Form with Multiple Columns?
– Boghyon Hoffmann
Nov 11 '18 at 8:58
add a comment |
0
0
0
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.
xml layout sapui5
asked Nov 9 '18 at 7:40
Michu93
798728
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.
xml layout sapui5
xml layout sapui5
asked Nov 9 '18 at 7:40
Michu93
798728
asked Nov 9 '18 at 7:40
Michu93
798728
edited Nov 14 '18 at 8:51
asked Nov 9 '18 at 7:40
Michu93
798728
asked Nov 9 '18 at 7:40
Michu93
798728
asked Nov 9 '18 at 7:40
Michu93
798728
798728
1
columnsM = "1" makes it one column, if you want 2 change it
– Jungkook
Nov 9 '18 at 12:32
@Jungkook that was first case which I tried
– Michu93
Nov 9 '18 at 12:34
Possible duplicate of Form with Multiple Columns?
– Boghyon Hoffmann
Nov 11 '18 at 8:58
add a comment |
1
columnsM = "1" makes it one column, if you want 2 change it
– Jungkook
Nov 9 '18 at 12:32
@Jungkook that was first case which I tried
– Michu93
Nov 9 '18 at 12:34
Possible duplicate of Form with Multiple Columns?
– Boghyon Hoffmann
Nov 11 '18 at 8:58
1
1
columnsM = "1" makes it one column, if you want 2 change it
– Jungkook
Nov 9 '18 at 12:32
columnsM = "1" makes it one column, if you want 2 change it
– Jungkook
Nov 9 '18 at 12:32
@Jungkook that was first case which I tried
– Michu93
Nov 9 '18 at 12:34
@Jungkook that was first case which I tried
– Michu93
Nov 9 '18 at 12:34
Possible duplicate of Form with Multiple Columns?
– Boghyon Hoffmann
Nov 11 '18 at 8:58
Possible duplicate of Form with Multiple Columns?
– Boghyon Hoffmann
Nov 11 '18 at 8:58
add a comment |
1 Answer
1
active
oldest
votes
1
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
answered Nov 10 '18 at 7:34
inizio
945512
Does it change something that you made two labels this way:<Text text="Label:" class="cLabel">instead of<f:FormElement label="Label">?
– Michu93
Nov 13 '18 at 6:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53221578%2ftwo-columns-of-labels-in-formcontainers-in-openui5%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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
answered Nov 10 '18 at 7:34
inizio
945512
Does it change something that you made two labels this way:<Text text="Label:" class="cLabel">instead of<f:FormElement label="Label">?
– Michu93
Nov 13 '18 at 6:32
add a comment |
1
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
answered Nov 10 '18 at 7:34
inizio
945512
Does it change something that you made two labels this way:<Text text="Label:" class="cLabel">instead of<f:FormElement label="Label">?
– Michu93
Nov 13 '18 at 6:32
add a comment |
1
1
1
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
answered Nov 10 '18 at 7:34
inizio
945512
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
answered Nov 10 '18 at 7:34
inizio
945512
answered Nov 10 '18 at 7:34
inizio
945512
answered Nov 10 '18 at 7:34
inizio
945512
answered Nov 10 '18 at 7:34
inizio
945512
945512
Does it change something that you made two labels this way:<Text text="Label:" class="cLabel">instead of<f:FormElement label="Label">?
– Michu93
Nov 13 '18 at 6:32
add a comment |
Does it change something that you made two labels this way:<Text text="Label:" class="cLabel">instead of<f:FormElement label="Label">?
– Michu93
Nov 13 '18 at 6:32
Does it change something that you made two labels this way:
<Text text="Label:" class="cLabel"> instead of <f:FormElement label="Label">?– Michu93
Nov 13 '18 at 6:32
Does it change something that you made two labels this way:
<Text text="Label:" class="cLabel"> instead of <f:FormElement label="Label">?– Michu93
Nov 13 '18 at 6:32
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53221578%2ftwo-columns-of-labels-in-formcontainers-in-openui5%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
columnsM = "1" makes it one column, if you want 2 change it
– Jungkook
Nov 9 '18 at 12:32
@Jungkook that was first case which I tried
– Michu93
Nov 9 '18 at 12:34
Possible duplicate of Form with Multiple Columns?
– Boghyon Hoffmann
Nov 11 '18 at 8:58