html - Polymer 1.0 a/custom element under toolbar clicking bug -


i encountering problems custom element created me, called <little-game></little-game>.
<little-game></little-game> template code :

<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 :host css of element:

:host {   display: inline-block;   text-decoration: none;   z-index:1; } 

those <little-game></little-game> elements displayed in page , inside page have <paper-scroll-header-panel> , <paper-toolbar>. problem when scroll down , .tall <paper-toolbar> gets smaller, can click through <paper-toolbar> on <little-game>/<paper-ripple> element.

<paper-ripple> css :

paper-ripple { z-index:1;} 


maintoolbar 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> 

maintoolbar css :

#maintoolbar { z-index:3;} 

so main problem can click <a href="#"><little-game></little-game></a> element through toolbar.


there image understand talking in better way:
image explains polymer-project issue z-indexing

i think need cancel tap event propagating through, try adding on-tap event handler on paper-toolbar e.g.

<paper-toolbar id="maintoolbar" class="tall" on-tap="{{cancelevent}}"> 

then add function cancel it

cancelevent: function(event) {   event.stoppropagation(); } 

Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

Nuget pack csproj using nuspec -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -