i am using Angular with Ionic
i am using ion-tabs .
ion-tabs container , covers the entire screen
if you hover your mouse over your screen while inspecting (using element inspector) you can see it has a width of 100% and height of 100% , how ever it is not seen in normal view of application , but
the problem is :
when i have an element such as a div element or ion-item or etc … and i give it a click event
it won’t work , because user is basically clicking on the ion-tabs and not the content on screen .
i made sure this problem is because of ion-tabs element covering entire screen, when i changed it’s z-index to -1
and click listeners started working .
you also can try to inspect your page elements , you can see the only thing your inspector catches , is
ion-tabs element !
i don’t know why there is no topic like this or what am i probably doing wrong ?!
but this is so disappointing and disgusting , i hope i get a help ?
Do you have a sample app we can look at? Not 100% sure what you are trying to describe.
here is an image of the issue :
the ion-tabs element is covering entire screen , so , onClick events of the elements in the page won’t work , because they are under this layer (ion-tabs layer) , and when i click , ion-tabs receives the click , not the elements on page ,
if i change the z-index of ion-tabs to a number below Zero , then onClick event of elements will start to work.
i think the image says it all , why is this ion-tabs covering entire page ?
thanks for attention .
So Tabs will cover the entire viewport, but it shouldn’t be intercepting click handers on elements in the pages. If you are seeing something otherwise, can you share a demo? I cannot replicate it on my end.
for people facing this problem later ,
problem solved following given solution in this stackoverflow topic :
Oh, that is not at all the solution to the problem. You should not be placing content along side the tabs. They’re meant to be used as we demo in the tabs starters.