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:

enter image description here

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:

  1. in meantime, create custom element has paper-ripple element 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>

  1. 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-ripple setting version of paper-ripple in bower.json file vsimonian/paper-ripple#containment-fix.

    if this, highly recommend keep tabs on issue , pull request may revert temporary changes in bower.json when no longer needed.


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more