All geek questions in one place

Polymer ripple over all children

I use Polymer to make a site. I'm currently having problems with paper-ripple . Now the problem is that the ripple does not appear when h2 or h3 pressed even when deleting the <div class='description'> -tag and closing the tab. Considering the size of paper-ripple , it covers all <div class='album-header'> , so this should not be a problem.

In addition, pressing the <div class='description'> button in the pad area also causes ripple.

 <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 did some additional testing and I narrowed down the problem. Take a look at this example. Applying styles to children elements does not present any problems unless you also assign opacity. In the example provided in the link, the green text received opacity. Clicking on this text does not create ripples for me (works in Chrome 36). (The purpose of the green color has nothing to do with it, just to make it easier to determine). Clicking on this <h3> tag anywhere causes ripple.

+6
source share
3 answers

You just need to increase the z-index on the external container, so all <content> will be lower. For instance:

 <!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>
+1
source

Try giving the div containing the "album title" position: relative, this solved my problem:

 .album-header { position: relative; }

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

+1
source

It seems that it can be easily fixed by increasing the z-index of the paper ripple itself, just put this in the style tag of the polymer element:

 paper-ripple{ z-index:10; }

Here is jsbin

0
source

Source: https://habr.com/ru/post/972499/

More articles:


All Articles