Page layout with margins on desktop and without margins on mobile devices

[Former Member]

Hi all,

I am looking for a layout control in UI5 which adds margins on the left and on the right of my content, when my app runs on a PC (desktop) - e.g.

But when the UI5 app runs on mobile devices the margins should disappear - e.g.

I have seen this behaviour on the SAP UI5 Explored page (https://sapui5.hana.ondemand.com/explored.html). But I am not quite sure which control is used there.

Thanks for your help.

Best regards

Dan

[maheshpalavalli]

If you use the class 'sapUiResponsiveMargin' with width set as 100%, then most of the controls will adjust like in the screenshot, you can give the same to responsive table and try.

Best Regards,
Mahesh

[Former Member]

Thanks, Mahesh.

As I read on this page the class 'sapUiResponsiveMargin' offers only a margin with 16 px to 32 px all around the control.

But unfortunatly in my case I only need a margin on the left and on the right of my control.

And another point: on the Explored page the margin on the left seems to be more than 32 px on the desktop version. Is there a way to set the margin with percentage?

Best regards

Dan

[maheshpalavalli]

you can create a css class with required margins and set it to the control.

or you can use the predefined 2 sided margins in below url:

https://sapui5.hana.ondemand.com/#docs/guide/777168ffe8324873973151dae2356d1c.html

Best REgards,
Mahesh