时间戳

首页 > 解决方案 > SAP UI5：将简单的表单标签和字段重新对齐到左侧

sapui5 - SAP UI5：将简单的表单标签和字段重新对齐到左侧

问题描述

我需要将所有这些突出显示的元素移动到页面的左侧（附屏幕）。下面是我的 xml 视图中简单表单的代码：

<---XML 视图--->

<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>

任何人都可以帮助我进行什么 GridData 跨度设置，以便将这些元素移动到最左边的角落？

在此处输入图像描述

标签： sapui5

解决方案

如果要使用网格数据的现有属性，可以使用indentL属性。

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

为您的标签提供一列（共 12 列），然后将其缩进为 0（对于大屏幕，跨度值 = 0），同样，您可以针对不同的屏幕尺寸执行此操作。

推荐阅读