title: Polymer 1.x: How to position paper menu
body: <h1>Question</h1>
  
  <blockquote>
    <p><strong>How do I position <code>&lt;paper-menu&gt;</code> element relative to <code>&lt;paper-menu-button&gt;</code> (or <code>&lt;paper-button&gt;</code>) that controls it and expand the menu to the left upon dropdown in order to prevent contents from going off screen?</strong> (Please provide a working JSFiddle or JSBin example.)</p>
  </blockquote>
  
  <p>For example, <a href="http://jsbin.com/xaladokimu/1/edit?html,output" rel="nofollow">in this JSBin</a> how do I get the <code>&lt;paper-menu&gt;</code> to index its position relative to the <code>&lt;paper-menu-button&gt;</code> which controls it? (Alternatively, the <code>&lt;paper-button&gt;</code> will also suffice.)</p>
  
  <p>In other words, no matter the width of the viewport, I want the menu to always dropdown relative to an edge of the button controlling it and expand its width moving the left across the screen. (To prevent the menu content from flowing off the screen or out of the viewport's right edge.) What code accomplishes this?</p>
  
  <p><hr></p>
  
  <h2>Code</h2>
  
  http://jsbin.com/xaladokimu/1/edit?html,output
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Polymer Bin&lt;/title&gt;
    &lt;base href="http://element-party.xyz"&gt;
    &lt;link rel="import" href="all-elements.html"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;x-element&gt;&lt;/x-element&gt;
  &lt;dom-module id="x-element"&gt;
    &lt;template&gt;
      &lt;style&gt;
        paper-menu-button{
          --paper-menu-button-dropdown:{
            max-width: 100%;
            right:70vw;
          };
        }
        paper-item{
          --paper-item:{
            white-space: nowrap;
            width: 100%;
          };
        }
      &lt;/style&gt;
          &lt;paper-header-panel class="flex"&gt;
              &lt;paper-toolbar&gt;
                  &lt;span class="flex"&gt;&lt;/span&gt;
                  &lt;paper-menu-button&gt;
                      &lt;paper-icon-button icon="menu" class="dropdown-trigger"&gt;&lt;/paper-icon-button&gt;
                      &lt;paper-menu class="dropdown-content"&gt;
                          &lt;paper-item&gt;This is a long label for the paper menu and button to show&lt;/paper-item&gt;
                          &lt;paper-item&gt;This is another long label for the paper menu and button&lt;/paper-item&gt;
                          &lt;paper-item&gt;This is still yet another long label for the paper menu&lt;/paper-item&gt;
                      &lt;/paper-menu&gt;
                  &lt;/paper-menu-button&gt;
              &lt;/paper-toolbar&gt;
              &lt;div class="fit"&gt;Content goes here...&lt;/div&gt;
          &lt;/paper-header-panel&gt;       
    &lt;/template&gt;
    &lt;script&gt;
      (function(){
        Polymer({
          is: 'x-element'
        });
      })();
    &lt;/script&gt;
  &lt;/dom-module&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>