The content of the menu button is displayed in the title of the application
I have a list of paper items and paper-menu-button
each list has a property dynamic-align
set to true. It works fine in most cases, but at some point the menu goes under app-header
and cannot access this option.
demo code and pictures below
<template is="dom-repeat" items="{{teamMembers}}">
<div role="listbox">
<paper-icon-item class="listbox-item">
<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>
</div>
</template>
snapshots when member name is clicked 2.6 and 4 respectively
<img src = "https://i.stack.imgur.com/mJRq7.png" alt = "when you click on member 4 name">
+3
source to share
No one has answered this question yet
Check out similar questions: