nativescript - How do hide a layout and included views -

in {n}, have layout containing views , hide - i.e. not take space. analogous css - display: none.

i know visibility: collapse - still takes space.

how can this?

visibility:collapse not taking space.

here example 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 example when change visibility of middle element (red grid box) completly collapse no space occupied , third element (gray grid box) move up.