Menu items goes under app header when menu list is long

[karthik-hande]

Description

when 'paper menu button's menu list is long and even if it's alignment is set to dynamic for some specific position it's menu items goes under app header and those items are hidden.

CODE:

  <fop-avatar string="A"></fop-avatar> 

  <paper-item-body class="item-details">
    <div class="name">member name [[index]]</div>
    <div class="title">member title</div>
  </paper-item-body>

  <paper-menu-button style="color:#0B746E;" dynamic-align="true">

      <paper-icon-button style="height: 24px;width:24px;" icon="help" class="dropdown-trigger" alt="menu"></paper-icon-button>

      <paper-menu style="padding: 0;" class="dropdown-content" on-iron-activate="_modifyRolesQueues">
          <paper-item> option A </paper-item>
          <paper-item> option B </paper-item>
          <paper-item> option C </paper-item>
          <paper-item> option D </paper-item>
          <paper-item> option E </paper-item>
          <paper-item> option F </paper-item>
          <paper-item> option G </paper-item>
      </paper-menu>

  </paper-menu-button>

</paper-icon-item>

Expected outcome

Either it's should display below app header or its show display over the app header

Actual outcome

Menu list is under the app header so menu items are not visible

Live Demo

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10