O menu suspenso de papel de polímero não sobrepõe lista de ferro - menu suspenso, polímero, polímero-1.0, lista de ferro

Meu problema é semelhante ao aqui: menu suspenso do menu de papel-menu (menu de papel) não sobrepondo outros itens da lista de ferro, mas nenhuma solução adequada é proposta lá.

O problema é que eu tenho um <paper-dropdown-menu>, que se abre corretamente dentro do <iron-list> item em que está, mas vai abaixo do seguinte <iron-list> Unid:

Eu tenho um simples <paper-dropdown-menu> como isso:

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

que é inserido em outro elemento com um <iron-list> (que carrega um arquivo JSON com <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>

Eu tentei definir o índice z para cada <iron-list> item para 1, mas isso não funcionou. Eu tentei trabalhar com <iron-overlay>, mas eu não consegui fazer isso. Sou muito novo no Polymer, portanto, se alguém tiver uma solução ou uma solução alternativa, isso seria ótimo.

Respostas:

Isso é porque iron-list está usando transform: translate3d para cada item da lista. A solução que eu encontrei está trabalhando é adicionar z-indexao item da lista atual (<div class="item"></div>) em que você tem o dropdown expandido, ou para todos os itens de cima para baixo em ordem decrescente, programaticamente.