ripple overlays other content when abs positioned

[ebidel]

Not sure the desired behavior...

paper-ripple requires a size and positioning to look correct within a container. Using the fit attribute is a convenient way to do this:

<div>
    <paper-shadow z="2" animated></paper-shadow>
    <paper-ripple fit></paper-ripple>
    <button>I'm not clickable</button>
</div>

The problem is that the ripple overlays all other content when it's absolutely positioned. For example, the button is not clickable here: http://jsbin.com/zoqunoqu/1/edit. Adding pointer-events: none would be an option, but it makes the ripple effect not respond to clicks.

I've seen users get tripped up by this already. It would be nice for the element to layer itself correctly, by default.

[morethanreal]

What if I make the ripple z-index: -99999 by default? The user can override in CSS if they need something else.

[frankiefu]

One option is to add <content></content> to paper-ripple's shadowRoot so one can put any content inside and be clickable.

<div>
  <paper-shadow z="2" animated></paper-shadow>
  <paper-ripple fit>
    <button>I'm clickable!</button>
    <a href="http://www.google.com" target="_blank">Link works!</a>
  </paper-ripple>
</div>

[robdodson]

Would that work for something like paper-tab
https://github.com/Polymer/paper-tabs/blob/master/paper-tab.html#L42?
Could .tab-content and its go inside the paper-ripple?

On Mon, Oct 13, 2014 at 2:56 PM, Frankie Fu [email protected]
wrote:

One option is to add to paper-ripple's shadowRoot so
one can put any content inside and be clickable.

I'm clickable! Link works!

—
Reply to this email directly or view it on GitHub
#5 (comment).

[morethanreal]

I would prefer that to not be the pattern because that makes it difficult to lazily create the ripple.