Skip to Content

Centering and responsive

Hi everyone , i have this table width=100% but as you can see there's too much losted space so i want to reduce it to 60% of width and centering i could do it with css but i'm sure that sapui5 have tools for this

i tried this:

<Panel>
	<FlexBox
		height="auto"
		alignItems="Center"
		justifyContent="Center">
			<items>
				<Table items="{ path : '/MaterialListSet' }" width="50%">
				<columns>
					<Column>
						<Text text="Material" />
					</Column>
					<Column
						minScreenWidth="Tablet"
						demandPopin="true">
						<Text text="Responsable" />
					</Column>
					<Column
						minScreenWidth="Desktop"
						demandPopin="true"
						hAlign="End">
						<Text text="Ult. Modif" />
					</Column>
					<Column
						minScreenWidth="Desktop"
						demandPopin="true"
						hAlign="Center">
						<Text text="Tipo de Material" />
					</Column>
					<Column
						hAlign="End">
						<Text text="Grupo de Material" />
					</Column>
				</columns>
				
				
				<items>
				
					<ColumnListItem>
						<cells>
							<ObjectIdentifier
								text="{MATERIAL}"/>
							<Text
								text="{RESPONSABLE}" />
							<Text
								text="{ULT_MODIF}" />
							<Text text="{MTYPE}" />
							<ObjectNumber
									number="{GP_ART}" />
						</cells>
					</ColumnListItem>
				
				</items>
				
				</Table>
			</items>
		</FlexBox>
</Panel>

and in mobile devices i need that this table with width 100%, what do you suggest ???

sapui5x.png (20.4 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Mar 05 at 11:22 PM

    One option is to set property fixedLayout of sap.m.Table to false. This will adapt the table to the content. But it will overflow on mobile device.

    You can set it to :

    fixedLayout="{device>/system/phone}"

    So that in mobile device the layout will be fixed again.

    Here a jsfiddle.

    Please check also sap.m.Table API, because setting fixedLayout to false can have some impacts on table rendering.

    Add comment
    10|10000 characters needed characters exceeded