paper-toolbar > paper-icon-button in very narrow screens
Daniel Llewellyn
Hi folks, this is more of a bug report (I’ll try to remember to post it onto the right GitHub repo when I can).
--
I’ve created a page using the polymer-starter-kit which has a paper-toolbar as part of the layout, slightly modified from the original starter-kit, to include my own logo in the middle-container, and a custom heading element in the bottom-container:
<paper-toolbar id="mainToolbar" class="tall" bottom-justify="center" middle-justify="center">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<!--<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>-->
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">
<picture>
<source srcset="/images/logo/syndo...@2x.webp 1x,
/images/logo/syndo...@4x.webp 2x"
type="image/webp" />
<img src="/images/logo/syndo...@2x.png"
srcset="/images/logo/syndo...@4x.png 2x"
alt="Syndol" />
</picture>
</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container" style="width: 100%">
<broadway-heading class="flex">Your better place</broadway-heading>
</div>
</paper-toolbar>
The page uses the animation function and styles for the toolbar to shrink, but stay onscreen, unchanged from the starter-kit.
On very narrow screens, when the page is scrolled so that the toolbar is in the collapsed-but-visible state where the middle container is at the same vertical spacing as the paper-icon-button, the menu button is unclickable due to the middle container overlapping and intercepting the clicks/touches. The required width of screen to guarantee this error is max-width: 240px. The behaviour begins to be noticeable at max-width: 300px.
Sent from Mail for Windows 10