PolymerElements · plequang · Oct 10, 2017
@@ -42,6 +42,13 @@
       width: 200px;
       margin-right: 20px;
     }
+
+    #fitIntoContainer {
+        height: 150px;
+        width: 100%;
+        text-align: center;
+        border: 1px solid black;
+      }
   </style></custom-style>
 
 </head>
@@ -259,6 +266,39 @@ <h4>You can style a paper-dropdown-menu using custom properties</h4>
         </paper-dropdown-menu-light>
       </template>
     </demo-snippet>
+
+    <h4>Fit the dropdown into a container</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <div id="fitIntoContainer" class=" horizontal-section-container">
+          <paper-dropdown-menu label="Fit into">
+            <paper-listbox slot="dropdown-content" class="dropdown-content">
+              <paper-item>allosaurus</paper-item>
+              <paper-item>brontosaurus</paper-item>
+              <paper-item>carcharodontosaurus</paper-item>
+              <paper-item>diplodocus</paper-item>
+            </paper-listbox>
+          </paper-dropdown-menu>
+
+          <paper-dropdown-menu-light label="Fit into (light)">
+            <paper-listbox slot="dropdown-content" class="dropdown-content">
+              <paper-item>allosaurus</paper-item>
+              <paper-item>brontosaurus</paper-item>
+              <paper-item>carcharodontosaurus</paper-item>
+              <paper-item>diplodocus</paper-item>
+            </paper-listbox>
+          </paper-dropdown-menu-light>
+        </div>
+        <script>
+          var fitIntoContainer = document.querySelector('#fitIntoContainer');
+          var dropDownMenu = fitIntoContainer.querySelector('paper-dropdown-menu');
+          var dropdownMenuLight = fitIntoContainer.querySelector('paper-dropdown-menu-light');
+          dropDownMenu.fitInto = fitIntoContainer;
+          dropdownMenuLight.fitInto = fitIntoContainer;
+        </script>
+      </template>
+    </demo-snippet>
+
   </div>
 
   <script>

@@ -287,6 +287,7 @@
       vertical-align="[[verticalAlign]]"
       horizontal-align="[[horizontalAlign]]"
       vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
+      fit-into="[[fitInto]]"
       disabled="[[disabled]]"
       no-animations="[[noAnimations]]"
       on-iron-select="_onIronSelect"
@@ -440,6 +441,14 @@
             value: 'top'
           },
 
+          /**
+           * The element to fit the dropdown into.
+           */
+          fitInto: {
+            type: Object,
+            value: window
+          },
+
           hasContent: {
             type: Boolean,
             readOnly: true

@@ -91,6 +91,7 @@
       vertical-align="[[verticalAlign]]"
       horizontal-align="[[horizontalAlign]]"
       dynamic-align="[[dynamicAlign]]"
+      fit-into="[[fitInto]]"
       vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
       disabled="[[disabled]]"
       no-animations="[[noAnimations]]"
@@ -270,7 +271,15 @@
           dynamicAlign: {
             type: Boolean
           },
-
+
+          /**
+           * The element to fit the dropdown into.
+           */
+          fitInto: {
+            type: Object,
+            value: window
+          },
+
           /**
            * Whether focus should be restored to the dropdown when the menu closes.
            */

@@ -21,6 +21,16 @@
   <link rel="import" href="../../paper-listbox/paper-listbox.html">
   <link rel="import" href="../../paper-item/paper-item.html">
   <link rel="import" href="../paper-dropdown-menu-light.html">
+  <style>
+      #fitIntoContainer {
+        position: fixed;
+        top: 200px;
+        left: 200px;
+        height: 120px;
+        width: 200px;
+        border: 1px solid black;
+      }
+    </style>
 </head>
 <body>
 
@@ -58,7 +68,21 @@
     </template>
   </test-fixture>
 
-  <script>
+  <test-fixture id="FitIntoDropdownMenu">
+    <template>
+      <div id="fitIntoContainer">
+        <paper-dropdown-menu-light no-animations dynamic-align>
+          <paper-listbox slot="dropdown-content" class="dropdown-content">
+            <paper-item label="Foo label property">Foo textContent</paper-item>
+            <paper-item label="Foo label attribute">Foo textContent</paper-item>
+            <paper-item>Foo textContent</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu-light>
+      </div>
+    </template>
+  </test-fixture>
+
+<script>
 
     function runAfterOpen(dropdownMenu, callback) {
       dropdownMenu.$.menuButton.$.dropdown.addEventListener('iron-overlay-opened', function() {
@@ -226,6 +250,38 @@
         });
       });
     });
+
+    suite('fitInto', function() {
+      var dropdownMenu;
+      var fitIntoContainer;
+      var dropdown;
+      setup(function(done) {
+        fitIntoContainer = fixture('FitIntoDropdownMenu');
+        dropdownMenu = Polymer.dom(fitIntoContainer).querySelector('paper-dropdown-menu-light');
+        dropdown = dropdownMenu.$.menuButton.$.dropdown;
+
+        // Wait for distribution.
+        Polymer.Base.async(function() {
+          done();
+        });
+      });
+
+      test('dropdown menu fits into container', function(done) {
+        dropdownMenu.fitInto = fitIntoContainer;
+        runAfterOpen(dropdownMenu, function () {
+          Polymer.Base.async(function () {
+            var targetRect = fitIntoContainer.getBoundingClientRect();
+            var dropdownRect = dropdown.getBoundingClientRect();
+            console.log(targetRect, dropdownRect);
+            assert.isTrue(dropdownRect.top >= targetRect.top, 'top ok');
+            assert.isTrue(dropdownRect.left >= targetRect.left, 'left ok');
+            assert.isTrue(dropdownRect.width <= targetRect.width, 'width ok');
+            assert.closeTo(dropdownRect.height, targetRect.height, 5, 'height ok');
+            done();
+          }, 200);
+        });
+      });
+    });
   </script>
 
 </body>

@@ -21,6 +21,17 @@
   <link rel="import" href="../../paper-listbox/paper-listbox.html">
   <link rel="import" href="../../paper-item/paper-item.html">
   <link rel="import" href="../paper-dropdown-menu.html">
+
+  <style>
+    #fitIntoContainer {
+      position: fixed;
+      top: 200px;
+      left: 200px;
+      height: 120px;
+      width: 200px;
+      border: 1px solid black;
+    }
+  </style>
 </head>
 <body>
 
@@ -58,6 +69,20 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="FitIntoDropdownMenu">
+    <template>
+      <div id="fitIntoContainer">
+        <paper-dropdown-menu no-animations dynamic-align>
+          <paper-listbox slot="dropdown-content" class="dropdown-content">
+            <paper-item label="Foo label property">Foo textContent</paper-item>
+            <paper-item label="Foo label attribute">Foo textContent</paper-item>
+            <paper-item>Foo textContent</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </div>
+    </template>
+  </test-fixture>
+
   <script>
 
     function runAfterOpen(dropdownMenu, callback) {
@@ -226,6 +251,37 @@
         });
       });
     });
+
+    suite('fitInto', function() {
+      var dropdownMenu;
+      var fitIntoContainer;
+      var dropdown;
+      setup(function(done) {
+        fitIntoContainer = fixture('FitIntoDropdownMenu');
+        dropdownMenu = Polymer.dom(fitIntoContainer).querySelector('paper-dropdown-menu');
+        dropdown = dropdownMenu.$.menuButton.$.dropdown;
+
+        // Wait for distribution.
+        Polymer.Base.async(function() {
+          done();
+        });
+      });
+
+      test('dropdown menu fits into container', function(done) {
+        dropdownMenu.fitInto = fitIntoContainer;
+        runAfterOpen(dropdownMenu, function () {
+          Polymer.Base.async(function () {
+            var targetRect = fitIntoContainer.getBoundingClientRect();
+            var dropdownRect = dropdown.getBoundingClientRect();
+            assert.isTrue(dropdownRect.top >= targetRect.top, 'top ok');
+            assert.isTrue(dropdownRect.left >= targetRect.left, 'left ok');
+            assert.isTrue(dropdownRect.width <= targetRect.width, 'width ok');
+            assert.isTrue(dropdownRect.height <= targetRect.height, 'height ok');
+            done();
+          }, 200);
+        });
+      });
+    });
   </script>
 
 </body>