Skip to Content
0

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

Mar 12 at 06:32 AM

44

avatar image

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.

exampleimage1.png (11.2 kB)
exampleimage2.png (13.6 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Drushya S Mar 12 at 07:53 AM
0

hi,

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

Show 3 Share
10 |10000 characters needed characters left characters exceeded

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

0
model.png (11.6 kB)
0

Hi Drushya,

Works great, thanks for the help.

1