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.
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
Post a Comment