Tapping a layout- actually taps behind elements?


Simplification :

I have 2 Buttons and a StackLayout ( which is inside a gridview ) which is “sliding” from the right side.

 <Button (tap)="onShowTapped(slidePosition)" ...></Button>
 <Button (tap)="onShowTapped(slidePosition)" ...></Button>

(the first button shows(!) the overlay , the second one hides(!) it)

Later on (as a sibling markup) I have this Layout ([full markup here]):

 <StackLayout slide-in slideFrom="right">
     <Label class="drawer" text="A wild right view has appeared" textWrap="true"></Label>

Here it how it looks :

enter image description here

So where is the problem ?

If you notice - I click on the overlay(!) which has a z-index:999 above the “close” button - and it actually taps the button!

enter image description here


What should I change in order for tapping the overlay - not to cause tapping on the button under it ?

Here is the playground for the app


I believe you’re going to want to either tweak your layouts or use a side-drawer plugin. @bradwaynemartin (king of layouts) had some good info here: https://stackoverflow.com/questions/46317484/nativescript-how-to-overlay-one-stacklayout-over-another-stacklayout

Maybe Brad can weigh in?


I believe this is what you were looking for.

I did see that you can click through the layout.
My solution is to add a tap listener on the layout of the drawer.

you can see this playground app to check what I mean by that.


I’ll leave it to you to make the slide in animation.


Hi @jen.looper

I’m already using a gridview as a hoster .

Basically this is the code ( which i’m learning)


I’ve attached a playground - for the code


Ok a few things here:

  1. z-index doesn’t work how you are thinking it does. I would advise not even using it. It doesn’t actually move the element up to be above another nested further in the view.
  2. Your side drawer container is probably only taking up a smaller portion of the displayed portion. If you set the StackLayout to have a background color of blue, you will see what I mean. You need to make this container full height. The easiest way to do this is to change it to this:
 <GridLayout rows="*" height="100%" slide-in slideFrom="right">
     <Label class="drawer" text="A wild right view has appeared" textWrap="true"></Label>
  1. If after setting the background color to blue you do see it’s full height, then it could be an issue specific to Android and how the elements are rendered. The button should never emit in that tap area, unless it’s technically higher in the view hierarchy.


  1. It doesn’t look like you are using the RadSideDrawer for the drawer implementation. Is there a reason why? If your implementation is custom, you definitely need the GridLayout I mention above to render on like row="0" and insert it at the bottom of your template.


@sean-perkins Thank you for your effort and reply. The reason why I don’t use the RAD controls is because of the requirement : “IOS and Android should look the same”.

For example Tab viewer. In android the tabs are at top while in IOS they are at bottom ( or vise versa , I don’t remember).
Anyway , It’s nice to enhance my NS skills :-).

I will investigate the height problem. Can I future ping you if I’d have a question about the height issue ?
Thanks again.


The RadSideDrawer should only manage the ability to bring-in an off-screen container from the top/bottom/left/right. The actual display and design is controlled by the container you pass inside of it. They shouldn’t look different between iOS and Android.

We use it in our Android and iOS app without a different design. The only difference we do, is on phone we bring our drawer from the bottom for accessibility instead of from the right.

& absolutely. Just @ me.


I’ve just noticed the Playground encoding problem

the link i’ve pasted is


But it is saved in this forums as :


which is incorrect one - it always opens a new project instead of the one that it should

So to solution is to double encode &amp; to &amp;amp;

So the final link would look like :


which is the correct one

I’m just saying…


@sean-perkins I put blue background ( and it takes the full height) and also height 100%. - But still button is clicked

Edited link


@multishiv19 That helped. adding a dummy method.


But is there any other solution rather then this hacky thing ? (btw did you use mac or android)


I use mac @Royi_Namir