【问题标题】：Polymer 1.x: How to position paper menuPolymer 1.x：如何定位纸张菜单
【发布时间】：2016-10-30 03:38:13
【问题描述】：

问题

我如何定位<paper-menu> 元素相对于控制它的<paper-menu-button>（或<paper-button>）并在下拉菜单中向左展开菜单以防止内容离开屏幕？（请提供一个有效的 JSFiddle 或 JSBin 示例。）

例如，in this JSBin 如何让<paper-menu> 相对于控制它的<paper-menu-button> 对其位置进行索引？（或者，<paper-button> 也足够了。）

换句话说，无论视口的宽度如何，我都希望菜单始终相对于控制它的按钮的边缘下拉，并在屏幕上向左移动扩展其宽度。（防止菜单内容从屏幕上流出或从视口的右边缘流出。）什么代码实现了这一点？

代码

http://jsbin.com/xaladokimu/1/edit?html，输出

<!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>

【问题讨论】：

标签： css polymer polymer-1.0 paper-elements

【解决方案1】：

删除right:70vw; 并将horizontal-align="right" 添加到您的paper-menu-button。

看到这个JSBin。

【讨论】：

【解决方案2】：

Code from accepted answer.

http://jsbin.com/yadujiqaxi/edit?html，输出，

<!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>

【讨论】：

【解决方案3】：

调整垂直偏移和水平偏移。

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

【讨论】：