paper-ripple prevents click on container element and doesn't fit

Question

Here is the partial code to which i'm troubled.

<core-toolbar id="main-toolbar" horizontal layout>
    <core-icon-button icon="menu" class="bottom" core-drawer-toggle>
        <paper-ripple class="recenteringTouch" fit></paper-ripple>
    </core-icon-button>
    <div id="titulo" class="bottom" flex></div>
    <paper-fab id="viva-close-button" icon="close" class="bottom" mini></paper-fab>
</core-toolbar>

The expected behaviour is the ripple spreading till the end of the core-icon-button and only this element, plus, well, it should toggle the menu drawer. It does work without the ripple but with it innit just crash and burns.

The ripple goes all toolbar long and also seems to prevent the menu icon to receive the click event and doesn't trigger any action.
It all happens with menu items too but they are a tad more complex (in my case at least because i extended it's functionality) so i decided to give the drawer button a try.

EDIT
code working:

    <paper-icon-button role="button" icon="menu" relative core-drawer-toggle>
      <paper-ripple class="recenteringTouch circle" fit></paper-ripple>
    </paper-icon-button>

absolutely no need for fiddling. peper-icon-button works like a charm.

Jeff Posnick Jeff Posnick · Accepted Answer · 2014-12-04T19:47:47

The fit layout attribute you're using is equivalent to setting position: absolute with top/right/bottom/left: 0. As explained in the docs, this sizes the element so that it fills the first parent element with position: relative set. Since you'd like it to fill your <core-icon-button>, you can just set position: relative on that, as shown below (using the relative attribute, which is another shortcut that Polymer defines):

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer Demo</title>
  </head>
  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
    <link rel="import" href="//www.polymer-project.org/components/core-icon-button/core-icon-button.html">
    
    <template is="auto-binding">
      Positioned:
      <core-icon-button relative icon="menu" on-tap="{{alertTap}}">
        <paper-ripple fit></paper-ripple>
      </core-icon-button>
    </template>
    
    <script>
      document.querySelector('template').alertTap = function(e) {
        console.log('Tapped!', e);
      };
    </script>
  </body>
</html>

This example also shows handling the tap event via a handler on the <core-icon-button>.

But... why not just use <paper-icon-button> instead? It sounds like you're replicating a lot of that functionality, and I'm not sure what the benefit is.

paper-ripple prevents click on container element and doesn't fit

1 Answers