fix(popover): apply fixed position to keep backdrop in viewport (#17352)

fixes #17337
ionic-team · Feb 5, 2019 · ee3b04a · ee3b04a
1 parent bc3aa21
commit ee3b04a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
@@ -25,7 +25,7 @@
   @include position(0, 0, 0, 0);
 
   display: flex;
-  position: absolute;
+  position: fixed;
 
   align-items: center;
   justify-content: center;

diff --git a/core/src/components/select/test/standalone/index.html b/core/src/components/select/test/standalone/index.html
@@ -12,6 +12,11 @@
 </head>
 
 <body>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique ipsum ipsum, eget hendrerit erat gravida vitae. Cras condimentum aliquam diam faucibus facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Duis libero quam, varius ac quam et, pulvinar pretium libero. Suspendisse mollis eros a vehicula pellentesque. Sed viverra eros vel lorem lacinia, lobortis congue dolor dignissim. In congue tincidunt massa, sit amet elementum turpis eleifend in. Nullam laoreet condimentum pharetra. Donec cursus viverra eros nec lacinia. Sed dapibus nulla vel augue efficitur tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce suscipit auctor sem et eleifend. Nullam vitae magna ex. Quisque dolor arcu, congue in nisi eu, ullamcorper tincidunt sapien. Praesent sed molestie ante, vitae tincidunt odio.</p>
+  <p>Duis quis rhoncus libero, vitae mollis tortor. Phasellus mollis tellus in auctor ullamcorper. Vivamus eget sagittis arcu, sed egestas dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer mi sapien, pharetra ut sapien vulputate, congue dictum libero. Integer dapibus, arcu at ullamcorper tempus, nulla dolor vestibulum arcu, sit amet laoreet libero leo eu turpis. Nulla varius maximus molestie.</p>
+  <p>Phasellus interdum sem ut viverra bibendum. Vivamus vel turpis arcu. Maecenas ultricies pretium dolor id blandit. In nibh sapien, tristique quis purus vitae, placerat sollicitudin ante. Suspendisse venenatis libero rutrum odio ultricies blandit. Proin a fringilla sem. Etiam pretium metus sem, eu lacinia tellus blandit id.</p>
+  <p>Vestibulum aliquam sapien elementum hendrerit viverra. Vivamus vulputate ligula id dui accumsan, at pulvinar mauris lobortis. Integer a ultrices nulla. Cras ultricies sollicitudin erat. Nam nec dolor a enim vestibulum egestas id non dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sodales libero congue magna dictum auctor. Duis vitae tellus tempor, tempus dolor semper, dictum eros. Etiam at suscipit lacus. Proin magna ipsum, pulvinar rhoncus vulputate vel, finibus nec nisi. Praesent felis neque, porttitor ac pellentesque et, mattis non lorem. Etiam et ex ultrices, posuere purus id, vestibulum massa.</p>
+
   <ion-select id="gender" placeholder="Select One">
     <ion-select-option value="f">Female</ion-select-option>
     <ion-select-option value="m">Male</ion-select-option>
@@ -24,7 +29,8 @@
     <ion-select-option value="red">Red</ion-select-option>
   </ion-select>
 
-  <ion-select id="gaming" ok-text="Okay" cancel-text="Dismiss">
+  <ion-select id="gaming" interface="popover" value="popover" ok-text="Okay" cancel-text="Dismiss">
+    <ion-select-option value="popover">Popover</ion-select-option>
     <ion-select-option value="nes">NES</ion-select-option>
     <ion-select-option value="n64">Nintendo64</ion-select-option>
     <ion-select-option value="ps">PlayStation</ion-select-option>