PolymerElements · plequang · Oct 10, 2017
@@ -68,6 +68,13 @@
       .horizontal-section {
         text-align: center;
       }
+
+      #fitIntoContainer {
+        height: 150px;
+        width: 100%;
+        text-align: center;
+        border: 1px solid black;
+      }
     </style>
   </custom-style>
 
@@ -200,6 +207,28 @@ <h4>Alternate Content</h4>
     </template>
   </demo-snippet>
 
+  <h4>Fit dropdown into container</h4>
+  <demo-snippet class="centered-demo">
+    <template>
+      <div id="fitIntoContainer">
+        <paper-menu-button id="fitIntoMenuButton">
+          <paper-icon-button icon="menu" slot="dropdown-trigger" alt="menu"></paper-icon-button>
+          <paper-listbox slot="dropdown-content">
+            <paper-item>alpha</paper-item>
+            <paper-item>beta</paper-item>
+            <paper-item>gamma</paper-item>
+            <paper-item>delta</paper-item>
+            <paper-item>epsilon</paper-item>
+          </paper-listbox>
+        </paper-menu-button>
+      </div>
+      <script>
+        var fitInto = document.querySelector('#fitIntoContainer');
+        var menuButton = document.querySelector('#fitIntoMenuButton');
+        menuButton.fitInto = fitInto;
+      </script>
+    </template>
+  </demo-snippet>
 </body>
 
 </html>
@@ -120,6 +120,7 @@
       horizontal-align="[[horizontalAlign]]"
       vertical-align="[[verticalAlign]]"
       dynamic-align="[[dynamicAlign]]"
+      fit-into="[[fitInto]]"
       horizontal-offset="[[horizontalOffset]]"
       vertical-offset="[[verticalOffset]]"
       no-overlap="[[noOverlap]]"
@@ -206,6 +207,15 @@
             type: Boolean
           },
 
+
+          /**
+           * The element to fit the dropdown into.
+           */
+          fitInto: {
+            type: Object,
+            value: window
+          },
+
           /**
            * A pixel value that will be added to the position calculated for the
            * given `horizontalAlign`. Use a negative value to offset to the

@@ -19,7 +19,17 @@
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
 
   <link rel="import" href="../paper-menu-button.html">
-
+  <style>
+
+    #fitIntoTarget {
+      position: fixed;
+      top: 200px;
+      left: 200px;
+      height: 200px;
+      width: 200px;
+      border: 1px solid black;
+    }
+  </style>
 </head>
 <body>
 
@@ -45,6 +55,16 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="FitInto">
+    <template>
+        <div id="fitIntoTarget"></div>
+        <paper-menu-button no-animations>
+          <span slot="dropdown-trigger">trigger</span>
+          <span slot="dropdown-content">content</span>
+        </paper-menu-button>
+    </template>
+  </test-fixture>
+
   <script>
     suite('<paper-menu-button>', function() {
       var menuButton;
@@ -192,6 +212,39 @@
         MockInteractions.tap(trigger);
       });
     });
+
+    suite('fitInto', function() {
+      var fitIntoTarget;
+      var menuButton;
+      var trigger;
+      var content;
+
+      setup(function() {
+        var elements = fixture('FitInto');
+
+        fitIntoTarget = elements[0];
+        menuButton = elements[1];
+        trigger = Polymer.dom(menuButton).querySelector('[slot="dropdown-trigger"]');
+        content = Polymer.dom(menuButton).querySelector('[slot="dropdown-content"]');
+      });
+
+      test('position dropdown content in fitInto container', function(done) {
+
+        menuButton.fitInto = fitIntoTarget;
+
+        menuButton.addEventListener('paper-dropdown-open', function() {
+          Polymer.Base.async(function () {
+            var targetRect = fitIntoTarget.getBoundingClientRect();
+            var contentRect = content.getBoundingClientRect();
+            expect(menuButton.opened).to.be.equal(true);
+            assert.equal(targetRect.top, contentRect.top, 'top ok');
+            assert.equal(targetRect.left, contentRect.left, 'left ok');
+            done();
+          }, 100);
+        });
+        MockInteractions.tap(trigger);
+      });
+    });
   </script>
 </body>
 </html>