Ripple polimerico su tutti i bambini

Sto usando Polymer per creare un sito web. Attualmente sto riscontrando alcuni problemi con paper-ripple. Ora il problema che sto avendo è che il ripple non appare quando si fa clic su h2 o h3, anche quando si rimuove lo <div class='description'> -tag e si chiude la scheda. Guardando le dimensioni del paper-ripple, copre l'intero <div class='album-header'>, quindi non dovrebbe essere il problema.Ripple polimerico su tutti i bambini

Inoltre, facendo clic su <div class='description'>, nell'area imbottita, si verifica anche l'ondulazione.

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

Edit:

Ho fatto qualche ulteriore prova e ho ridotto il problema verso il basso. Dai un'occhiata all'esempio this. L'applicazione di stili agli elementi figli non crea problemi, a meno che non si assegni anche un'opacità. Nell'esempio riportato nel link il testo verde è stato reso opaco. Fare clic su questo testo non genera il ripple per me (eseguito in Chrome 36). (L'assegnazione del colore verde non ha nulla a che fare con esso, solo per renderlo più facile da individuare). Cliccando ovunque intorno al tag <h3> si verifica il ripple.

fonte

2014-07-19 jdepypere

Puoi dare qualche altro contesto per la riproduzione di questo, idealmente con un jsbin? Ho giocato in jsbin e ho trovato questo, che sembra funzionare correttamente: http://jsbin.com/mowaxe/3/edit –

Fwiw, nell'esempio di Peter 'position: relative' sul genitore è un requisito per' fit', non per 'paper-ripple' stesso. –

@PeterBurns: ho modificato la mia domanda, ho scoperto che ha qualcosa a che fare con l'opacità. – jdepypere

Devi solo aumentare z-index sul contenitore esterno, quindi tutto <content> sarebbe sotto di esso. Ad esempio:

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

fonte

2015-04-18 04:32:13 codevision

sembra che può essere facilmente fissato crescente indice z di carta-ripple stessa, appena messo questo in stile tag polimero-elemento:

paper-ripple{ 
    z-index:10; 
}

Ecco JSBin

fonte

2015-05-11 20:05:09 Mike

Provare a dare il contenente div "album-header" un "position: relative" questo ha risolto il mio problema:

.album-header { 
    position: relative; 
}

Questa soluzione è stata trovata in questa domanda: http://goo.gl/a3qccA

fonte

2015-07-23 11:25:58

Ripple polimerico su tutti i bambini

risposta

Problemi correlati