Skip to Content
author's profile photo Krzysztof Koroscik
0
Krzysztof Koroscik

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

Posted on Jul 09, 2020 at 09:01 AM 73 Views Last edit Jul 09, 2020 at 09:02 AM 2 rev.

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

untitled.png (16.9 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

1 Answer

  • Best Answer
    author's profile photo Krzysztof Koroscik
    Krzysztof Koroscik
    Posted on Jul 13, 2020 at 12:45 PM
    0

    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

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.