All geek questions in one place

Polymer 1.0 - the waviness of the paper runs across the screen, and not inserted into the element

I'm trying to use the ripple effect on a clickable list of items, but I ran into a problem that the ripple effect spreads across the screen when I encapsulate this list in a custom item. It works fine if I put it in my index.html, but fails when I create a custom element that is included there. See the picture of the problem:

enter image description here

I read similar questions where the answer is to make the container relative, which should already be done. Therefore, I am wondering if I need to set a special attribute in the host when using the ripple effect in the user element.

My sample code is as follows.

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 index.html with the contents of the section tag (with the included section tag) my-list.html, the ripple effect works fine. The fitting property in the ruffle also did not solve the problem. What am I missing in a custom component?

+6
source share
3 answers

NOTE. If you experience this behavior or behavior similar to it in the latest paper-ripple version, it is likely that the problem this answer answers with is not a problem (see update below).

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

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

If the paper-ripple parent does not have the position: relative , this will cause ripples to fill the first position: relative parent, which it finds, which cannot be its immediate parent, or the entire document, depending on what happens first.

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

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

This issue is caused by the current issue with paper-ripple . It happens that paper-ripple elements target the my-list element instead of their parent paper-icon-item element.

There are currently two ways to fix this:

  • At the same time, create a custom element with a paper-ripple element in its shadow / shadow DOM and place it according to your element.

    For instance:

 <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>

  1. I sent a transfer request to the repository containing a fix for this problem. However, it is not yet merged. At this point, you can say that bower installed a fixed copy of paper-ripple by installing the version of paper-ripple in your bower.json file on vsimonian/paper-ripple#containment-fix .

    If you do this, I highly recommend that you keep an eye on issue and pull so that you can undo temporary changes to bower.json when they are no longer needed.

+7
source

Probably noting that - as a potential key - it is important to set the ripple container element to position: relative;

I was wondering why ripples fill the root container, despite the fact that it already determines the size of the boxes.

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

+3
source

There is no <style> tag in my-list.html.

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

0
source

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

More articles:


All Articles