Lumira Designer- a way to change application layout according to mobile screen orientation

[chris_bw_sap]

Hello everyone,

Is there is any way to change ( in this case hide a component) application layout based on mobile screen orientation?

For example, here's what im trying to achieve. The application should show only 2 components while browsing it horizontally but should also display a crosstab when displaying it vertically.

Is it possible to achieve this in Lumira Designer?

Any feedback is very appreciated

Kind regards,

Krzysiek

[chris_bw_sap · Accepted solution]

If anyone have similiar issue i have found the answer.

This can be achieved using Custom CSS.

We can read the current device resolution using the @media screen functionality (there are lot of templates online) and then hide components using { display: none;} .

For example, if we want to hide Panel_1 while browsing in landscape, and hide Panel_2 while browsing in portrait mode on Iphone , the following CSS will do the trick.

/* 375x667 - Landscape View */
@media screen and (min-height: 375px) and (max-height: 413px) and (orientation:landscape)
{
#PANEL_1_panel1 { display: none;}
}


/* 667x375 - Portrait View */
@media screen and (min-height: 667px) and (max-height: 735px) and (orientation:portrait)
{
#PANEL_2_panel1 { display: none;}
}

Kind regards,

Krzysiek