Issues have arisen with a custom element I created, named
<little-game></little-game>Here is the template code for
<little-game></little-game><template>
<a href="{{link}}">
<paper-material elevation="1">
<paper-ripple></paper-ripple>
<iron-image src="{{img_url}}"></iron-image>
<div id="description">{{name}}</div>
<div id="category">{{category}}</div>
</paper-material>
</a></template>
And here is the :host CSS for this element:
:host {
display: inline-block;
text-decoration: none;
z-index:1;
}
The
<little-game></little-game><paper-scroll-header-panel><paper-toolbar>. The issue arises when scrolling down and the '.tall' <paper-toolbar> becomes smaller, allowing clicks to pass through onto the <little-game>/<paper-ripple> element.<paper-ripple> CSS:paper-ripple {
z-index:1;}
Main toolbar HTML:
<paper-toolbar id="mainToolbar" class="tall">
<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="more-vert"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">App title</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center horizontal layout">
<div class="bottom-title paper-font-subhead">App subtitle</div>
</div>
</paper-toolbar>
Main toolbar CSS:
#mainToolbar {
z-index:3;}
The main issue lies in being able to click the <a href="#"><little-game></little-game></a>
element through the toolbar.
<a href="#"><little-game></little-game></a>To better understand the scenario, refer to this image:
https://i.sstatic.net/svn0s.png