CODEWITHSUNDEEP
polymerpolymer-1.0paper-elements
ServerFaultRoot
ServerFaultRoot

Reputation: 108

Polymer 1.0 paper-menu-button horizontalAlign and horizontalOffset not working

I have the following code:

<paper-toolbar id="mainToolbar">
    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
    <div class="app-name">Dashbord</div>
    <span class="flex"></span>
    <paper-menu-button horizontalAlign="right" horizontalOffset="20" verticalAlign="top" verticalOffset="50">
        <paper-icon-button icon="more-vert" 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>
</paper-toolbar>

The menu button works as expected but the drop down horizontalAlign and horizontalOffset properties do not take effect.

The only way I got the drop down menu to work is by hard coding the values in the element definition:

<iron-dropdown
  id="dropdown"
  opened="{{opened}}"
  horizontal-align="right"
  vertical-align="top"
  horizontal-offset="50"
  vertical-offset="20"
  open-animation-config="[[openAnimationConfig]]"
  close-animation-config="[[closeAnimationConfig]]"
  no-animations="[[noAnimations]]"
  focus-target="[[_dropdownContent]]">
  <paper-material class="dropdown-content">
    <content id="content" select=".dropdown-content"></content>
  </paper-material>
</iron-dropdown>

Upvotes: 2

Views: 2415

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Notice the difference between your definition horizontalOffset="20" and the working one horizontal-offset="50"?

Try changing your code to

<paper-menu-button
    horizontal-align="right"
    horizontal-offset="20"
    vertical-align="top"
    vertical-offset="50">

See property name to attribute name mapping.

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.

Upvotes: 6

Related Questions