How to have two colomn grid layout with Text Area control on right?

[Former Member]

Hi experts,

I have a need to create a grid layout where I have a Text area control on the right (8 rows) and the space on the left is taken up by other fields eg

LABEL INPUT TEXT AREA LABEL TEXT AREA

LABEL INPUT TEXT AREA

LABEL INPUT TEXT AREA

However, the label and input on the left will not be put in positions like above until after the text area input box ends eg

LABEL INPUT TEXT AREA LABEL TEXT AREA

TEXT AREA

TEXT AREA

LABEL INPUT

LABEL INPUT

This works fine if the text area is on the left. Is it possible for me to get the desired outcome? My current code is below:

									<f:FormElement>
									  	<Label text="{i18n>feedbackType}" required="true" textAlign="Start"
											id="feedbackTypeLabel">
											<layoutData>
												<l:GridData span="L2 M2 S2" />
											</layoutData>
										</Label>
										<f:fields>
												<Select items="TBA"
												selectedKey="TBAA">
												<core:Item key="TBA" text="TBAA"/>
											<layoutData>
												<l:GridData span="L4 M4 S4" />
											</layoutData>
												</Select>
										</f:fields>
									</f:FormElement> 
									
									<f:FormElement>
										<Label text="{i18n>complaintDetails}" required="false" textAlign="Start"
											id="complaintDetailsLabel">
											<layoutData>
												<l:GridData span="L2 M2 S2" />
											</layoutData>
										</Label>
										<f:fields>
												<TextArea xmlns="sap.m"
													placeholder="" id="complaintDetailsInput" 
													value="" rows="8">
											<layoutData>
												<l:GridData span="L4 M4 S4" />
											</layoutData>
												</TextArea>
										</f:fields>
									</f:FormElement>
									
									<f:FormElement>
									  	<Label text="{i18n>serviceBrand}" required="true" textAlign="Start"
											id="serviceBrandLabel">
											<layoutData>
												<l:GridData span="L2 M2 S2" />
											</layoutData>
										</Label>
										<f:fields>
												<Select items="TBA"
												selectedKey="TBAA">
												<core:Item key="TBA" text="TBAA"/>
																								
											<layoutData>
												<l:GridData span="L4 M4 S4" />
											</layoutData>
												</Select>
										</f:fields>
									</f:FormElement> 								
																	
									<f:FormElement>
									  	<Label text="{i18n>serviceType}" required="true" textAlign="Start"
											id="serviceTypeLabel">
											<layoutData>
												<l:GridData span="L2 M2 S2" />
											</layoutData>
										</Label>
										<f:fields>
												<Select items="TBA"
												selectedKey="TBAA">
												<core:Item key="TBA" text="TBAA"/>
																								
											<layoutData>
												<l:GridData span="L4 M4 S4" />
											</layoutData>
												</Select>
										</f:fields>
									</f:FormElement> 

I hope my question is clear, thanks for any tips or answers.

Edit: Pictures of what I have and what I want below:

New form elements will not be populated until after TextArea:

I would like them to be on the left column in unutilised area.

Thanks again for any help.

[former_member553417 · Accepted solution]

hi,

Please upload the image how you want and now what you get

[Former Member · Accepted solution]

Thank you Drushya, I have now updated my question with relevant pictures. Please disregard label truncation as it's still a work in progress 🙂

[former_member553417 · Accepted solution]

hi Green,

Use this Simple form dual to achieve this

https://sapui5.hana.ondemand.com/1.44.16/explored.html#/sample/sap.ui.layout.sample.SimpleForm480/co...

model.png

[Former Member · Accepted solution]

Hi Drushya,

Works great, thanks for the help.