paper-menu doesn't display on foreground

[Zippersk]

trafficstars

I have this problem:

When I visit page the paper-menu displays correctly but when i scroll down and back to top, the paper-menu is behind the div (with id nav). I tried to play with z-index and positons but nothing worked.

CSS:

paper-scroll-header-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:  #eee;
}

paper-toolbar {
  /* custom toolbar height */
  height: 100px;
  background-color: #6a1b9a;
  overflow: visible;
}
#nav {
  background-color: #6a1b9a;
}

HTML:

<paper-scroll-header-panel condenses keep-condensed-header header-height="100" condensed-header-height="50">

  <paper-toolbar>

   <h1>Some text</h1>
    <div class="flex"></div>
    <paper-menu-button>
      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>

   <div id="nav" class="flex bottom fit">
            <paper-tabs noink  >
              <paper-tab >Tab1</paper-tab>         
              <paper-tab >Tab2</paper-tab>
              <paper-tab >Tab3</paper-tab>
              <paper-tab >Tab4</paper-tab>
            </paper-tabs>
  </div>

  </paper-toolbar>

  <div class="content">
    <sample-content size="100"></sample-content>
  </div>

</paper-scroll-header-panel>

If you want to play around with code... (I don't know how to import polymer to jsbin or codepin. It says something about no third party using.)

[cdata]

Thanks for the thorough report! I will take a look.

[Sinjins]

I may have run into a similar menu overlay problem here, and @ebidel recommended I file a bug report. Here is another example, but demonstrated in slightly different manner (this time with iron-list). The SO issue report, and jsbin are noted below for your reference.

SO issue: http://stackoverflow.com/questions/31884654/paper-menu-buttons-dropdown-paper-menu-not-overlaying-other-iron-list-items

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

[Sinjins]

@cdata Added an update to SO issue included above. Please note that jsbin on mobile device (Chrome 44 for Android) does not display dropdown menu at all.

[cdata]

/cc @valdrinkoshi this is relevant to the overlay "final solution"

[dwalters18]

@cdata @valdrinkoshi any movement on this? Even a workaround is proving troublesome

[valdrinkoshi]

Hi @realiztiK, the issue is caused by how stacking context works. If you insert an overlay within an element that creates a new stacking context, it will be "trapped" in it (see this simplified example http://jsbin.com/lemufe/4/edit?html,output). paper-menu contains an iron-dropdown, which implements iron-overlay-behavior. It tries to be on top of everything by setting a high enough z-index, but its parent makes this impossible by creating a new stacking context. We're currently working on overlays 2.0 to overcome this issue :+1:

[Caffeinix]

Any idea whether the dropdown not appearing at all is the same issue or an unrelated one? I am seeing that behavior (paper-menu-button in an iron-list does not show the menu at all, but works fine with dom-repeat instead) on Chrome 48 on desktop but am unsure whether I should file a separate bug for it.

[valdrinkoshi]

Hi @Caffeinix, it might be related, a jsbin showing the issue would be helpful :smile:

[Caffeinix]

@valdrinkoshi: here you go: https://jsbin.com/qofemayowu/edit?html,output

[valdrinkoshi]

Thanks @Caffeinix! Yes, this is related. Each element of the iron-list has will-change and transform css properties setup, which create a new stacking context, which traps the paper-menu-button (and its iron-dropdown) within it.

[NicolasRannou]

+1 any update on this one?

[RoXuS]

+1 a simple example with the similar problem => http://jsbin.com/qinebiwiyo/edit?html,console,output

[Sinjins]

+1 still waiting for a fix for this critical issue, it seems

[dwalters18]

I suggest using https://github.com/PolymerElements/iron-overlay-behavior/pull/155

Until the PR is approved, you can access it by adding the following to your bower.json "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#stacking-context"

This branch has no conflicts with master.

[rogeliotrejo13]

Hi everyone, any solution for this? I'm working with an old polymer version, and I have this issue. Thanks in advance! Best regards!