Skip to Content
0

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

Mar 25, 2017 at 11:23 AM

70

avatar image
D B

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

unbenannt.jpg (37.9 kB)
unbenannt2.jpg (35.3 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Mahesh kumar palavalli Mar 26, 2017 at 06:07 AM
0

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

Show 2 Share
10 |10000 characters needed characters left characters exceeded

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

0

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

0