聚合物紙下拉菜單不覆蓋鐵列表

Question

我的問題類似於這裏：paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items，但沒有提出足夠的解決方案。

的問題是，我有一個<paper-dropdown-menu>，其中<iron-list>項目是在內部正確地打開了，但那張以下<iron-list>項下：

我有一個簡單<paper-dropdown-menu>這樣的：

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

其被插入到另一個元件與<iron-list>（它加載與<iron-ajax>一個JSON文件）：

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

我嘗試將每個<iron-list>項目的z-index設置爲1，但那不起作用。我嘗試着與<iron-overlay>一起工作，但我沒有設法完成。我對聚合物非常陌生，所以如果有人有解決方案或解決方法，那就太好了。

Answer 1

這是因爲iron-list對每個列表項都使用transform: translate3d。 我找到的解決方法是使用編程方式將z-index添加到當前列表項目（<div class="item"></div>），在該項目中您已將下拉展開，或從上到下按降序排列所有項目。