Polymer 1.0 - 如何在屏幕上保留纸张下拉菜单？答案

【问题标题】：Polymer 1.0 - how to keep paper-dropdown-menu in the screen?Polymer 1.0 - 如何在屏幕上保留纸张下拉菜单？
【发布时间】：2016-04-08 19:08:53
【问题描述】：

这就是我的代码的样子。

<div class="horizontal layout flex wrap center-justified">
  <paper-material elevation='1'>
    <div class='horizontal layout'> <span>Some Data</span> <span>
      <paper-icon-button icon='more-vert'></paper-icon-button>
      <paper-dropdown-menu>
        <paper-material id='drop-install'>
          <paper-menu>
            <paper-item id='paper-drop-item'>Tap1</paper-item>
            <paper-item id='paper-drop-item'>Tap2</paper-item>
            <paper-item id='paper-drop-item'>Tap3</paper-item>
          </paper-menu>
        </paper-material>
      </paper-dropdown-menu>
      </span> </div>
  </paper-material>
  <paper-material elevation='1'>
    <div class='horizontal layout'> <span>Some Data</span> <span>
      <paper-icon-button icon='more-vert'></paper-icon-button>
      <paper-dropdown-menu>
        <paper-material id='drop-install'>
          <paper-menu>
            <paper-item id='paper-drop-item'>Tap1</paper-item>
            <paper-item id='paper-drop-item'>Tap2</paper-item>
            <paper-item id='paper-drop-item'>Tap3</paper-item>
          </paper-menu>
        </paper-material>
      </paper-dropdown-menu>
      </span> </div>
  </paper-material>
</div>

我确信一切正常。

但是，当我点击屏幕右端的第二个纸张图标按钮时，纸张下拉菜单会离开显示屏。

所以，我希望所有纸张下拉菜单都在屏幕内。请支持我解决此问题。

【问题讨论】：

你能创建一个jsfiddle/codepen/codesn-p吗？
我正在使用聚合物 1.0，因此无法创建。@depperm
目前分享 Polymer 1.0 的最佳工具恕我直言，是 Plunker。有关如何使用它的更多信息，请参阅this question。

标签： javascript jquery css polymer

【解决方案1】：

尝试使用这种样式：

.dropdown-content{
    position: fixed;
    right: 0px;
    }

开：

    <paper-menu-button class="flex-options">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
            <paper-menu class="dropdown-content" attr-for-selected="data-route" selected="[[route]]">
                <paper-item class="item-hover">

我遇到了同样的问题，我的内容离开了屏幕。这种样式为我解决了这个问题。

【讨论】：