Полимер 1.x: Как позиционировать меню бумаги

Вопрос

Как мне позиционировать <paper-menu> элемент относительно <paper-menu-button> (или же <paper-button> ), который управляет им и расширяет меню влево при раскрытии, чтобы содержимое не исчезло с экрана? (Пожалуйста, предоставьте работающий пример JSFiddle или JSBin.)

Например, в этом JSBin как получить <paper-menu> индексировать свою позицию относительно <paper-menu-button> который контролирует это? (В качестве альтернативы <paper-button> тоже хватит.)

Другими словами, независимо от ширины области просмотра, я хочу, чтобы меню всегда выпадало относительно края кнопки, управляющей им, и расширяло его ширину, перемещаясь влево по экрану. (Чтобы предотвратить вытекание содержимого меню с экрана или из правого края окна просмотра.) Какой код выполняет это?

Код

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>
Источник

3 ответа

Решение

Удалить right:70vw; и добавить horizontal-align="right" на ваш paper-menu-button,

Смотрите этот JSBin.

Источник

Код из принятого ответа.

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>
Источник

Настройте вертикальное смещение и горизонтальное смещение.

   <paper-menu-button horizontal-align="left" horizontal-offset="20" vertical-align="top" vertical-offset="60">
Источник
Другие вопросы по тегам