I have a collapsible overlay that has some z-index greater than the page below it. The problem is, when the collapse button is above a form element, say an input, the click on the collapse button falls through to the form element causing the keyboard to pop up and the page to shift. Is there a way to prevent this? Here’s what I’m trying right now.
The css for the overlay is the same as the .bar from ionic. Here are the relevant lines.
display: flex; position: absolute; right:0; left:0; z-index: 10;
And then my toggle class changes the height around to 30px for collapsed and 200px for expanded.
Oddly, this behavior doesn’t happen on my chrome for my desktop. Just on my mobile device. For what it’s worth, I am currently testing on a Moto X running Android 4.4.2.
Does anybody have a suggestion for how I might stop the apparent event propagation? Or another idea what might be causing this?