सभी बच्चों पर पॉलिमर लहर

मैं वेबसाइट बनाने के लिए Polymer का उपयोग कर रहा हूं। मुझे वर्तमान में paper-ripple के साथ कुछ समस्याएं हैं। अब मेरे पास यह मुद्दा यह है कि h2 या h3 पर क्लिक करते समय लहर दिखाई नहीं देती है, भले ही <div class='description'> -tag और यह बंद टैब को हटाते समय भी। paper-ripple के आकार को देखते हुए, यह पूरे <div class='album-header'> को कवर करता है, इसलिए यह समस्या नहीं होनी चाहिए।सभी बच्चों पर पॉलिमर लहर

इसके अलावा, <div class='description'> के तहत, गद्देदार क्षेत्र में क्लिक करके, लहर भी होती है।

<div class="album-header" vertical layout on-tap="{{albumTapped}}"> 
    <paper-ripple class="recenteringTouch" fit></paper-ripple> 
    <content select="img"></content> 
    <div class="description"> 
     <content select="h2"></content> 
     <content select="h3"></content> 
    </div> 
</div>

संपादित करें:

मैं कुछ आगे के परीक्षण किया है और मैं इस मुद्दे को संकुचित होता है। this उदाहरण पर एक नज़र डालें। बच्चों के तत्वों को शैलियों को लागू करने से कोई समस्या नहीं आती है, जब तक कि आप अस्पष्टता भी निर्दिष्ट न करें। लिंक में दिए गए उदाहरण में हरे रंग के पाठ को अस्पष्टता दी गई है। इस पाठ पर क्लिक करने से मेरे लिए लहर उत्पन्न नहीं होती है (क्रोम 36 में चल रहा है)। (रंगीन हरे रंग के असाइनमेंट के पास इसके साथ कुछ लेना देना नहीं है, बस इसे स्थानांतरित करना आसान है)। <h3> टैग के आस-पास कहीं भी क्लिक करने से लहर उत्पन्न होती है।

स्रोत

2014-07-19 jdepypere

क्या आप इसे पुन: उत्पन्न करने के लिए कुछ और संदर्भ दे सकते हैं, आदर्श रूप से एक जेएसबीएन के साथ? मैंने जेएसबीएन में चारों ओर खेला और इसके साथ आया, जो ठीक से काम कर रहा है: http://jsbin.com/mowaxe/3/edit –

Fwiw, पीटर के उदाहरण में 'स्थिति: माता-पिता पर सापेक्ष' ' फिट ',' पेपर-रिपल 'के लिए नहीं। –

@ पीटरबर्न: मैंने अपना प्रश्न संपादित कर लिया है, पता चला है कि इसमें अस्पष्टता के साथ कुछ करना है। – jdepypere

आपको बाहरी कंटेनर पर z-index बढ़ाना होगा, इसलिए सभी <content> इसके नीचे होंगे। उदाहरण के लिए:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'> 
    <script>console.clear()</script> 
</head> 
<body> 
<style> 
    album-small { 
    width: 200px; 
    margin: 10px; 
    } 
</style> 

<div layout horizontal> 
    <album-small> 
    <h2>The Shatner</h2> 
    <h3>An interminable rambling spoken word piece.</h3> 
    </album-small> 
    <album-small> 
    <h2>What</h2> 
    <h3>What wat what wat what what wat</h3> 
    </album-small> 
</div> 
<polymer-element name='album-small' noscript> 
<template> 
    <style> 
    .album-header { 
     /* Note: relative positioning seems necessary 
     for paper-ripple. */ 
     position: relative; 
     padding: 10px; 
     height: 200px; 
     z-index: 100; 
    } 
    </style> 
    <div class="album-header" vertical layout> 
    <paper-ripple class='recenteringTouch' fit></paper-ripple> 

    <content select="img"></content> 
    <div class="description"> 
     <content select="h2">hi</content> 
     <content select="h3">hi</content> 
    </div> 
    </div> 
</template> 
</polymer-element> 

</body> 
</html>

स्रोत

2015-04-18 04:32:13 codevision

ऐसा लगता है कि यह आसानी से बढ़ रही है कागज लहर के ही z- सूचकांक तय किया जा सकता है, बस बहुलक-तत्व शैली टैग में डाल:

paper-ripple{ 
    z-index:10; 
}

यहाँ JSBin

स्रोत

2015-05-11 20:05:09 Mike

है

युक्त div "एल्बम-हेडर" को "स्थिति: रिश्तेदार" देने का प्रयास करें, यह मेरी समस्या हल करता है:

.album-header { 
    position: relative; 
}

यह समाधान इस प्रश्न में मिला था: http://goo.gl/a3qccA

स्रोत

2015-07-23 11:25:58

सभी बच्चों पर पॉलिमर लहर

उत्तर

संबंधित मुद्दे