Visibility of an Element on screen - collapse does not work


I have a layout where a list is displayed. User can add entries to the list by hitting a button.
There is a gridlayout with a text field inside it. I want to display this gridlayout only when user hits “create new entry” button. So, I have kept the visibility of this gridlyout as “collapse” in my xml file. When user hits create button, I am changing the visibility to “visible” in program.
When user hits “save” button, I am changing the visibility back to “collapse” in program.

According to my understanding the gridlayout should not take space on screen initially as it is in collapse state, when create button is hit, the gridlayout should show. Then again when save button is hit the gridlayout should vanish.

This works as expected on android.
This was working earlier on iOS also. But now, visibility=“collapse” does not work. It works like hidden. It takes up space on screen. When I try to change its visibility programatically, that does not work either.

<GridLayout #tabGrid class="tabgrid" rows="60" visibility="collapse" >  // takes space on screen
            <TextField #nameTxtFld class="nameTxtFld" hint="Enter Name" [(ngModel)]="name" required col="0" row="0"></TextField>

in create method I have:

this.tabGrid.nativeElement.set(“visibility” , “visible”); //does not work

in save method:

this.tabGrid.nativeElement.set(“visibility” , “collapse”); //does not work either

It worked earlier as expected on iOS also.Yesterday I updated my nativescript version and removed and added ios platform.I guess it stopped working after that but not sure.


You must handle visibility as a property,

this.tabGrid.nativeElement.visibility = "visible" // "collapse"


Thank you.

This issue is resolved for me. I had to do some changes in my code. There was one more GridLayout outside the one that I was trying to collapse. I removed that and it is working now.