paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items

问题

I'm running into an issue using polymer 1.0's paper-menu-button. It's dropdown menu isn't overlaying neighbouring iron-list elements.

I am building an element that displays items using iron-list, and each item has a dropdown menu of options that can be performed on that particular iron-list item. However, the paper-menu-button's paper-menu dropdown is not appearing on top of neighbouring iron-list items, only on top of it's own list item.

I've tried inspecting items in Chrome, and playing around with z-index and overflow CSS settings to no avail. Can anyone help me out with my overlay issue?

Here is an extract of my custom element's local DOM template (and see further below for screenshot):

UPDATE: jsbin demonstrating the issue:

http://jsbin.com/kuyovuh/1/edit?html,output

UPDATE #2: Also note that in Chrome 44 on mobile (Android), the paper-menu-button doesn't show dropdown at all in the above jsbin case.

<div id="projectsVertBoundary" class="layout vertical">

    <div id="projectsHorBoundary" class="layout horizontal center-center">

         <iron-list items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">

             <template>

                    <div>
                        <paper-material id="itemShadow" animated elevation="1">

                            <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">

                                <paper-menu-button id="projOptionsBtn" vertical-align="top" horizontal-align="right" class="layout fixed-right">
                                    <paper-icon-button id="projOptionsButtonIcon" icon="menu" class="dropdown-trigger"></paper-icon-button>
                                    <paper-menu id="projOptionsSelMenu" class="dropdown-content">
                                        <paper-icon-item id="projEdit"> 
                                            <iron-icon icon="create"></iron-icon> Edit Project
                                        </paper-icon-item>
                                        <paper-icon-item id="projCopy">
                                            <iron-icon icon="content-copy"></iron-icon> Copy Project
                                        </paper-icon-item>
                                        <paper-icon-item id="projDelete"> 
                                            <iron-icon icon="delete"></iron-icon> Delete Project
                                        </paper-icon-item>
                                    </paper-menu>
                                </paper-menu-button>

                                <div class="layout flex vertical">
                                    <!-- a bunch of arbitrary list item content -->
                                    Project Type:<p>[[projLI.kind]]</p>
                                </div>
                           </div>
                       </paper-material>
                  </div>

             </template>

        </iron-list>

   </div>
</div>

来源：https://stackoverflow.com/questions/31884654/paper-menu-buttons-dropdown-paper-menu-not-overlaying-other-iron-list-items

标签

polymer

polymer-1.0

paper-elements