CODEWITHSUNDEEP
sapui5
05_pingpong
05_pingpong

Reputation: 77

SAP UI5: Re-align simple form label and fields to left side

I need to move all these highlighted elements to left side of the page(Screen attached). Below is the code for simple form in my xml view:

<---XML View--->

<f:SimpleForm id="SimpleFormDisplay354" minWidth="1024" maxContainerCols="3" editable="false" layout="ResponsiveGridLayout"
				title="{i18n>searchFormTitle}" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">
				<f:content>
					<Label text="{i18n>labelDate}" labelFor="datePickerId" design="Bold" >
						<layoutData>
							<l:GridData span="L2 M3 S6"/>
						</layoutData>
					</Label>
					<DatePicker id="datePickerId" visible="true" displayFormat="MMM dd,yyyy" valueFormat="dd-MM-yyyy" placeholder="{i18n>dateInput}"
						change="handleChange">
						<layoutData>
							<l:GridData span="L2 M3 S6"/>
						</layoutData>
					</DatePicker>
					<Button text="{i18n>search}" id="searchButton" width="50%" type="Emphasized" class="Button" press="OnDateSearch">
						<layoutData>
							<l:GridData span="L2 M3 S6"/>
						</layoutData>
					</Button>
				</f:content>
			</f:SimpleForm>

Can anyone help me with what GridData span setting I should make in order to move these elements to left most corner?

enter image description here

Upvotes: 1

Views: 12724

Answers (2)

Darshna Rekha
Darshna Rekha

Reputation: 1116

If you want to use the existing properties for the Grid Data, you can use indentL property.

<Label text="{i18n>labelDate}" labelFor="datePickerId" design="Bold" >
    <layoutData>
        <l:GridData span="L1 M3 S6" indentL="0"/>
    </layoutData>
</Label>

Give one column (out of 12) to your label and then indent it to 0 (span value=0 for the Large screen), similarly, you can do it for different screen sizes.

Upvotes: 3

I.B.N.
I.B.N.

Reputation: 1034

You have to set labelSpanL/labelSpanM to 1 or 2 to decrease left space, but SimpleForm always align the label to right and put colon ":" between Label and Control.

If labelSpan 1 or 2 dont resolve. The only way i know is trying use CSS.

Upvotes: 1

Related Questions