Closed jconlon closed 5 years ago
Can't reproduce on https://pwa-starter-kit.appspot.com (after adding a click
handler on a heading below the header). Is it because you directly/indirectly made some changes that causes the menu button to have pointer-events: none
?
I was able to reproduce on a new pwa starter app using the typescript template, by adding a paper-expansion-panel like the one in my app.
npm i dr-niels-paper-expansion-panel
Then I added it to the my-view3.ts
just above the top section.
return html`
<div>
<paper-expansion-panel header="Load Avro Schema +">
<p>
Just add some text
More text
...More
</p>
</paper-expansion-panel>
</div>
<section>
Can see the problem in a local dev server with npm start
then browsing to:
http://127.0.0.1:8081/view3
with Chrome with the devtools, using the toggle device toolbar to narrow the app to force the mobile menu.
The problem shows up when I try to select the View Two
from the menu. Instead it opens my expansion panel underneath.
Ah, the <paper-item>
inside <paper-expansion-panel>
is creating a stacking context with position: relative
. We don't use z-index
in the template because it's messy, but you can fix this by adding one to <app-drawer>
(i.e. app-drawer { z-index: 1 }
).
Yes, that fixed it thanks!
When switching from the wide, desktop view (which works fine) to a small, mobile one selecting a new page will NOT select the page if there is an underlying widget underneath the menu.
Instead if the user selects a page title near the widget in the underlying page it does not select the new page but the widget instead.
Is there a way to make the mobile menu not click through to the underlying page?