Skip to Content

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

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Mar 12 at 07:53 AM

    hi,

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

    Add comment
    10|10000 characters needed characters exceeded