CODEWITHSUNDEEP
csspolymerpolymer-1.0paper-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Polymer 1.x: How to position paper menu

Question

How do I position <paper-menu> element relative to <paper-menu-button> (or <paper-button>) that controls it and expand the menu to the left upon dropdown in order to prevent contents from going off screen? (Please provide a working JSFiddle or JSBin example.)

For example, in this JSBin how do I get the <paper-menu> to index its position relative to the <paper-menu-button> which controls it? (Alternatively, the <paper-button> will also suffice.)

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?

Code

http://jsbin.com/xaladokimu/1/edit?html,output 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu-button{
        --paper-menu-button-dropdown:{
          max-width: 100%;
          right:70vw;
        };
      }
      paper-item{
        --paper-item:{
          white-space: nowrap;
          width: 100%;
        };
      }
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button>
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Upvotes: 2

Views: 2196

Answers (3)

Paul Tran
Paul Tran

Reputation: 1

Tweak the vertical offset and horizontal offset.

   <paper-menu-button horizontal-align="left" horizontal-offset="20" vertical-align="top" vertical-offset="60">

Upvotes: 0

Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Code from accepted answer.

http://jsbin.com/yadujiqaxi/edit?html,output, 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu-button{
        --paper-menu-button-dropdown:{
          max-width: 100%;
        };
      }
      paper-item{
        --paper-item:{
          white-space: nowrap;
          width: 100%;
        };
      }
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button horizontal-align="right">
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Upvotes: 1

Justin XL
Justin XL

Reputation: 39006

Remove right:70vw; and add horizontal-align="right" to your paper-menu-button.

See this JSBin.

Upvotes: 3

Related Questions