Polymer 1.0 - paper-ripple goes all over the screen instead fit in the element -
i'm trying use ripple effect on clickable list of items i'm facing issue ripple effect goes on screen when encapsulate list custom element. works great if place in index.html fails when create custom element included there. see image of issue:
i've been reading similar questions answer make container relative, should done. i'm wondering if required set special attribute in host when using ripple effect custom element.
my example code 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 unread</div> <paper-ripple></paper-ripple> </paper-icon-item> <paper-icon-item> <div class="label" fit>mark important</div> <paper-ripple></paper-ripple> </paper-icon-item> <paper-icon-item> <div class="label" fit>add 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 in index.html section tag content (the section tag included) of my-list.html, ripple effect works fine. fit property in ripple didn't solve problem either. missing in custom component?
note: if experiencing behaviour, or behaviour similar it, in latest version of paper-ripple, problem answer addresses not problem experiencing (see update below).
paper-ripple has following css (only relevant lines shown):
:host { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } if paper-ripple's parent element not have position: relative set, result in ripple filling first position: relative parent finds, may not immediate parent, or whole document, whichever comes first.
to fix this, make sure element using paper-ripple in has position: relative in css.
update (15 june 2015): paper-ripple 1.0.1 released on 11 june 2015, includes the pr fixing problem, making fixes recommended in answer obsolete. update bower.json bind polymerelements/paper-ripple#^1.0.1.
this problem caused a current issue paper-ripple. happening paper-ripple elements targeting my-list element instead of parent paper-icon-item element.
there 2 ways fix this:
in meantime, create custom element has
paper-rippleelement in shady/shadow dom, , size fit 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 pull request repository contains fix problem. currently, however, hasn't been merged yet. now, can tell bower install patched copy of
paper-ripplesetting version ofpaper-rippleinbower.jsonfilevsimonian/paper-ripple#containment-fix.if this, highly recommend keep tabs on issue , pull request may revert temporary changes in
bower.jsonwhen no longer needed.
Comments
Post a Comment