Menu
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.
591
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>
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
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
