Polymer ripple over all children

Asked 19/7, 2014 at 13:12 Answered 23/7, 2015 at 11:25

I'm using Polymer to make a website. I'm currently having some issues with paper-ripple. Now the issue I'm having is that the ripple doesn't appear when clicking the h2 or h3, even when removing the <div class='description'>-tag and it's closing tab. Looking at the size of the paper-ripple, it covers the whole <div class='album-header'>, so that shouldn't be the issue.

Also, clicking under the <div class='description'>, in the padded area, also makes the ripple occur.

<div class="album-header" vertical layout on-tap="{{albumTapped}}">
    <paper-ripple class="recenteringTouch" fit></paper-ripple>
    <content select="img"></content>
    <div class="description">
        <content select="h2"></content>
        <content select="h3"></content>
    </div>
</div>

Edit:

I've done some further testing and I have narrowed the issue down. Take a look at this example. Applying styles to the children elements doesn't give any issues, unless you also assign an opacity. In the example given in the link the green text has been given an opacity. Clicking this text does not generate the ripple for me (running in Chrome 36). (The assignment of the color green has nothing to do with it, just to make it easier to spot). Clicking anywhere around that <h3> tag does make the ripple occur.

Decal answered 19/7, 2014 at 13:12 Comment(4)

Can you give some more context for reproducing this, ideally with a jsbin? I played around in jsbin and came up with this, which seems to be working properly: jsbin.com/mowaxe/3/edit – Braley 20/7, 2014 at 19:20

Fwiw, in Peter's example position: relative on the parent is a requirement for fit, not for paper-ripple itself. – Bride 20/7, 2014 at 19:37

@PeterBurns: I've edited my question, found out it has something to do with the opacity. – Decal 21/7, 2014 at 11:11

I could confirm that issue reproduces with Polymer 0.8 and Chrome 41 too. – Dinar 18/4, 2015 at 4:12

You have to just increase z-index on the outer container, so all <content> would be below it. For example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'>
  <script>console.clear()</script>
</head>
<body>
<style>
  album-small {
    width: 200px;
    margin: 10px;
  }
</style>

<div layout horizontal>
  <album-small>
    <h2>The Shatner</h2>
    <h3>An interminable rambling spoken word piece.</h3>
  </album-small>
  <album-small>
    <h2>What</h2>
    <h3>What wat what wat what what wat</h3>
  </album-small>
</div>
<polymer-element name='album-small' noscript>
<template>
  <style>
    .album-header {
      /* Note: relative positioning seems necessary
         for paper-ripple. */
      position: relative; 
      padding: 10px;
      height: 200px;
      z-index: 100;
    }
  </style>
  <div class="album-header" vertical layout>
    <paper-ripple class='recenteringTouch' fit></paper-ripple>

    <content select="img"></content>
    <div class="description">
      <content select="h2">hi</content>
      <content select="h3">hi</content>
    </div>
  </div>
</template>
</polymer-element>

</body>
</html>

Dinar answered 18/4, 2015 at 4:32 Comment(0)

Try giving the containing div "album-header" a "position: relative" this solved my issue:

.album-header {
    position: relative;
}

This solution was found in this question: http://goo.gl/a3qccA

Inform answered 23/7, 2015 at 11:25 Comment(0)

Looks like it can be easily fixed increasing z-index of paper-ripple itself, just put this into polymer-element style tag:

paper-ripple{
    z-index:10;
}

Here is JSBin

Phosphorate answered 11/5, 2015 at 20:5 Comment(0)

Recommended topics

Hot tags