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