iron-fit-behavior conflicts with app-header-layout
iron-fit-behavior assumes that the dropdown will be displayed on top of everything since it sets z-index: 103.
However app-header-layout sets the "header" as z-index 1 and "content" as z-index 0. So the resulting z-index of the dropdown inside the content is 0:103 which is less than 1:0, so the header hides the dropdown.
Expected outcome
Either:
The dropdown is on top of everything, including the app-header
The dropdown is located inside the content and not behind header.
Actual outcome
The dropdown is located with position: fixed;top:0 and is hidden behind app-header.
Description
iron-fit-behaviorconflicts withapp-header-layoutiron-fit-behaviorassumes that the dropdown will be displayed on top of everything since it sets z-index: 103. Howeverapp-header-layoutsets the "header" as z-index 1 and "content" as z-index 0. So the resulting z-index of the dropdown inside the content is 0:103 which is less than 1:0, so the header hides the dropdown.Expected outcome
Either:
Actual outcome
The dropdown is located with
position: fixed;top:0and is hidden behind app-header.Live Demo
https://jsbin.com/desunocezo/edit?html,css,output
Steps to reproduce
Put
paper-dropdown-menuinsideapp-header-layoutBrowsers Affected