Polymer 1.0 - paper-ripple goes all over the screen instead fit in the element

Asked 3/6, 2015 at 22:5 Answered 17/6, 2015 at 10:41

I'm trying to use the ripple effect on a clickable list of items but I'm facing the issue that the ripple effect goes all over the screen when I encapsulate that list into a custom element. It works great if I place it in my index.html but fails when I create a custom element that is included there. See an image of the issue:

enter image description here

I've been reading similar questions where the answer is to make the container relative, which should be already done. So I'm wondering if it is required to set any special attribute in the host when using the ripple effect from a custom element.

My example code is as follow.

Index.html

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>List test</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="elements/elements.html"> 
  <style>
    paper-icon-item {
      position: relative;
      height: 48px;
    }
  </style>
</head>
<body unresolved class="fullbleed layout vertical">
  <template is="dom-bind" id="app">
        <my-list></my-list>
  </template>
  <script src="scripts/app.js"></script>
</body>
</html>

my-list.html

<dom-module id="my-list">
    <style>
      paper-icon-item {
        position: relative;
        height: 48px;
      }
    </style>
  <template>
  <section>
    <div class="menu">
      <paper-icon-item>
        <div class="label" fit>Mark as unread</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
      <paper-icon-item>
        <div class="label" fit>Mark as important</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
      <paper-icon-item>
        <div class="label" fit>Add to Tasks</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
      <paper-icon-item>
        <div class="label" fit>Create event</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
    </div>
  </section>
  </template>

</dom-module>
<script>
    (function () {
      Polymer({
        is: 'my-list'
      });
    })();
</script>

When replacing the in the index.html by the section tag content (the section tag included) of my-list.html, the ripple effect works fine. The fit property in the ripple didn't solve the problem either. What am I missing in the custom component?

Speleology answered 3/6, 2015 at 22:5 Comment(0)

NOTE: If you are experiencing this behaviour, or behaviour similar to it, in the latest version of paper-ripple, it is likely that the problem that this answer addresses is not the problem you are experiencing (see update below).

paper-ripple has the following CSS (only relevant lines shown):

:host {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

If the paper-ripple's parent element does not have position: relative set, this will result in the ripple filling the first position: relative parent that it finds, which may not be its immediate parent, or the whole document, whichever comes first.

To fix this, make sure that the element you are using paper-ripple in has position: relative in its CSS.

UPDATE (15 June 2015): paper-ripple 1.0.1 was released on 11 June 2015, which includes the PR fixing this problem, making the fixes recommended in this answer obsolete. Simply update bower.json to bind to PolymerElements/paper-ripple#^1.0.1.

This problem is caused by a current issue with paper-ripple. What is happening is that the paper-ripple elements are targeting the my-list element instead of their parent paper-icon-item element.

There are currently two ways to fix this:

In the meantime, create a custom element that has a paper-ripple element in its shady/shadow DOM, and size it to fit your element.

For example:

<dom-module id="ripple-wrapper">
  <style is="custom-style">
    :host {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
  <template>
    <paper-ripple></paper-ripple>
  </template>
</dom-module>
<script>
  Polymer({ is: 'ripple-wrapper' });
</script>

I have submitted a pull request to the repository that contains a fix for this problem. Currently, however, it hasn't been merged yet. For now, you can tell bower to install the patched copy of paper-ripple by setting the version of paper-ripple in your bower.json file to vsimonian/paper-ripple#containment-fix.

If you do this, I highly recommend that you keep tabs on the issue and pull request so that you may revert the temporary changes in bower.json when they are no longer needed.

Pimply answered 4/6, 2015 at 1:7 Comment(2)

I updated the paper-ripple to the 1.0.1 version but it didnt solve this issue – Rouvin 29/6, 2015 at 15:23

@WaleedAsender OP was having a different issue than the one you ran across. Just as @zerodevx mentioned, if a position: absolute element stretched to top: 0; left: 0; bottom: 0; right: 0;, such as the ripple, is not in a position: relative container, then it will fill the window instead of its parent element. This results in a similar problem, but it is indeed, as you pointed out, different than what the problem I addressed with my answer. I'll go ahead and update the answer, since the bug has long been patched, for anyone else who runs across this question. – Pimply 30/6, 2015 at 1:51

It is probably with noting that - as a potential gotcha - it is important to set the ripple container element to position: relative;

I was wondering why ripples fill the root container despite already defining my box sizes.

http://jsbin.com/zijumuhege/edit?html,output

Borgerhout answered 17/6, 2015 at 10:41 Comment(1)

@kctang, good catch! did I actually write display: relative??! Thanks for the edit! :) – Borgerhout 5/7, 2015 at 4:27

The opening <style>tag is missing in my-list.html.

It seems as if triggering the ripple effect on a <paper-ripple> element triggers it on all other <paper-ripple> elements inside that custom element as well. Creating a custom element for the items or moving everything outside of a custom element seem to solve the problem for me.

Brehm answered 3/6, 2015 at 23:12 Comment(0)

Recommended topics

Hot tags