Il menu a discesa di carta polimerica non si sovrappone all'elenco di ferro - menu a discesa, polimero, polimero-1.0, lista di ferro

Il mio problema è simile a quello qui: menu a discesa del menu carta-menu (menu carta) non sovrapposto ad altri elementi della lista di ferroma nessuna soluzione adeguata viene proposta lì.

Il problema è che ho un <paper-dropdown-menu>, che si apre correttamente all'interno del <iron-list> elemento è in, ma va sotto il seguente <iron-list> elementi:

Ho un semplice <paper-dropdown-menu> come questo:

<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
<paper-listbox class="dropdown-content" selected="1">
<paper-item>Spanish</paper-item>
<paper-item>English</paper-item>
<paper-item>French</paper-item>
<paper-item>Sinhala</paper-item>
</paper-listbox>
</paper-dropdown-menu-light>

che è inserito in un altro elemento con un <iron-list> (che carica un file JSON con <iron-ajax>):

<iron-list id="list" items="[[bookList.books]]" as="item">
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
<div class="avatar">[[item.id]]</div>
<div class="pad">
<div class="primary">[[item.titleen]]</div>
<div class="shortText">[[item.slug]]</div>
<div class="longText">[[item.blurb]]</div>
<div class="languagedrop">
<language-drop></language-drop>
</div>
</div>

</div>
</div>
</template>
</iron-list>

Ho provato a impostare lo z-index per ciascuno <iron-list> articolo su 1, ma non ha funzionato. Ho provato a lavorare con <iron-overlay>ma non sono riuscito a farlo. Sono molto nuovo a Polymer, quindi se qualcuno ha una soluzione o soluzione alternativa sarebbe fantastico.

risposte:

È perché iron-list sta usando transform: translate3d per ogni voce dell'elenco. La soluzione che ho trovato funziona è aggiungere z-indexalla voce di elenco corrente (<div class="item"></div>) su cui è stato espanso il menu a discesa, o su tutti gli elementi dall'alto verso il basso in ordine decrescente, in modo programmatico.