paper-manu-button issue with offset

[rno...@gmail.com]

Hello,

Given the following snippet:

<!-- Main Toolbar -->

<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="apps" 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>

Is there any reasons why the menu will still show on the top right corner and have of the content off screen?

If I hard code the values inside the element it works as expected:

<template>

    <div id="trigger" on-tap="open">

      <content select=".dropdown-trigger"></content>

    </div>

    <iron-dropdown

      id="dropdown"

      opened="{{opened}}"

      horizontal-align="right"

      vertical-align="[[verticalAlign]]"

      horizontal-offset="50"

      vertical-offset="[[verticalOffset]]"

      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>

  </template>

Any input would be greatly appreciated.

Thank you.