How do hide a layout and included views

Question

In {N}, I have a layout containing views and would sometimes like to hide it - i.e. not take up space. Analogous to CSS - display: none.

I know about visibility: collapse - but it still takes up space.

How can I do this?

Answer 1

visibility:collapse is not taking any space.

Here is an example to confirm it:

page.xml

<Page loaded="loaded">
    <StackLayout>
        <Button text="{{ showDetails ? 'Hide' : 'Show' }}" tap="toggle" />
        <GridLayout width="200" height="200" backgroundColor="red" visibility="{{ showDetails ? 'visible' : 'collapsed' }}" >
            <Label text="{{ showDetails }}" textWrap="true" />
        </GridLayout>
        <GridLayout width="200" height="200" backgroundColor="gray" >
            <Label  text="Always visible element" textWrap="true" />
        </GridLayout>  
    </StackLayout>
</Page>

page.ts

var observable = require("data/observable");
var pageData = new observable.Observable();

exports.loaded = function(args) {
    pageData.set("showDetails", true);
    args.object.bindingContext = pageData;
}

exports.toggle = function() {
    pageData.set("showDetails", !pageData.get("showDetails"));
}

With this example when you change the visibility of the middle element (red grid box) it will completly collapse with no space occupied and the third element (gray grid box) will move up.