How to hide a layout item and all its content on small devices

Question

I have two layout items in a screen called (1) "AccountsMaster" and (2) "AccountDetails". AccountsDetails contains many content items including a table. I am trying to hide Accounts Details on smaller screens, such that only AccountsMaster is visible and using all the limited screen space.

I tried the following in user-customization.css

screen and (max-width: 400px) and (orientation: portrait), 
screen and (max-width: 640px) and (max-height: 400px) and (orientation: landscape) { 
    .prols-phone-hidden{
        display : none;
    }
}

And then in my screen js code behind:

myapp.AccountsScreen.AccountDetails_postRender = function (element, contentItem) {
    // Write code here.
    $(element).addClass("prols-phone-hidden");
};

But that had no effect.

I also tried "visibility : collapse" in the css, well that did hide the layout and all its children, but the screen space it occupied originally was still reserved (and blank), so the master layout would not use the whole screen and will be squeezed in half of it.

How do I hide the details such that the master layout can have all the screen to itself??

Regards,

Answer 1

In Lightswitch HTML, I would do the following on your screen created event:

myapp.SCREENNAME.created = function (screen) {

    //GET THE HEIGHT AND WIDTH OF THE SCREEN
    var height = window.screen.availHeight;
    var width = window.screen.availWidth;

    if (height < 400 || width < 640) { //HIDE THE CONTENTS
        screen.findContentItem("AccountsMaster").isVisible = false;
        screen.findContentItem("AccountDetails").isVisible = false;
    }
    else {
        //DO NOTHING
    }
};

This 2 variables at the top will fetch your screen height and width, and then below you can determine what you want to do based on there values. by using the screen.findContentItem("") you can then hide the information you dont want to show because it does't display correctly.