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

问题

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:

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?

回答1:

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.

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/30631617/polymer-1-0-paper-ripple-goes-all-over-the-screen-instead-fit-in-the-element

标签

polymer

polymer-1.0