如何在小型设备上隐藏布局项及其所有内容

Question

我在一个名为 (1) "AccountsMaster" 和 (2) "AccountDetails" 的屏幕中有两个布局项目。 AccountsDetails 包含许多内容项，其中包括 table。我试图在较小的屏幕上隐藏帐户详细信息，以便只有 AccountsMaster 可见并使用所有受限屏幕 space。

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

然后在我屏幕后面的js代码：

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

但这没有任何效果。

我也在 css 中尝试了 "visibility : collapse"，确实隐藏了布局及其所有子项，但是屏幕 space原来占用的还是预留的（空白），所以master layout不会用到整个屏幕，会被挤成一半。

如何隐藏细节以便主布局可以拥有所有屏幕？

此致，

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("") 您可以隐藏您不想显示的信息，因为它无法正确显示。

如何在小型设备上隐藏布局项及其所有内容

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

html

visual-studio-lightswitch

lightswitch-2013