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?

Outfall

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.

Fransen

Thanks. I was trying to hide a ListView item. When the outer most element is a StackLayout and when I set the visibility to collapse, it hides all the nested elements but it still takes up space. But when I added an extra level of StackLayout and applied the visibility to the inner element - it works as expected. – Outfall