javascript - Polymer 1.0 - 如何在屏幕中保留纸张下拉菜单？

Question

这就是我的代码的样子。

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

我确信一切正常。

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

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

Answer 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">

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