Как скрыть элемент макета и все его содержимое на небольших устройствах

Question

У меня есть два элемента макета на экране под названием (1) «AccountsMaster» и (2) «AccountDetails». AccountsDetails содержит много элементов контента, включая таблицу. Я пытаюсь скрыть сведения об учетных записях на меньших экранах, так что отображается только AccountsMaster и используется все ограниченное пространство экрана.

Я попытался следующие в пользовательском 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; 
    } 
} 

, а затем в моем экране код позади расслоение плотной:

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

Но это не имело никакого эффекта.

Я также попытался «видимость: коллапс» в CSS, ну что сделал скрыть расположение и всех его потомков, но пространство экрана он занимал первоначально до сих пор сохраняются (и пустой), поэтому мастер макет не будет используйте весь экран и сжимаете его половину.

Как скрыть детали, чтобы мастер-макет мог иметь весь экран для себя ??

С уважением,

Answer 1

В Lightswitch HTML, я бы сделал следующее на экране созданного события:

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 
    } 
}; 

Это 2 переменных в верхней загрузит вашу высоту и ширину экрана, а затем ниже вас может определить, что вы хотите сделать, исходя из значений. используя screen.findContentItem(""), вы можете скрыть информацию, которую вы не хотите показывать, потому что она не отображается правильно.