fix(popover): allow target element to be positioned at left:0

fixes #6896
ionic-team · Jun 14, 2016 · ea450d4 · ea450d4
1 parent fa1537e
commit ea450d4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
@@ -268,8 +268,9 @@ class PopoverTransition extends Transition {
     // If ev was passed, use that for target element
     let targetDim = ev && ev.target && ev.target.getBoundingClientRect();
 
-    let targetTop = targetDim && targetDim.top || (bodyHeight / 2) - (popoverHeight / 2);
-    let targetLeft = targetDim && targetDim.left || bodyWidth / 2 - (popoverWidth / 2);
+    let targetTop = (targetDim && 'top' in targetDim) ? targetDim.top : (bodyHeight / 2) - (popoverHeight / 2);
+    let targetLeft = (targetDim && 'left' in targetDim) ? targetDim.left : (bodyWidth / 2) - (popoverWidth / 2);
+
     let targetWidth = targetDim && targetDim.width || 0;
     let targetHeight = targetDim && targetDim.height || 0;
 
@@ -328,8 +329,8 @@ class PopoverTransition extends Transition {
     // If ev was passed, use that for target element
     let targetDim = ev && ev.target && ev.target.getBoundingClientRect();
 
-    let targetTop = targetDim && targetDim.top || (bodyHeight / 2) - (popoverHeight / 2);
-    let targetLeft = targetDim && targetDim.left || bodyWidth / 2;
+    let targetTop = (targetDim && 'top' in targetDim) ? targetDim.top : (bodyHeight / 2) - (popoverHeight / 2);
+    let targetLeft = (targetDim && 'left' in targetDim) ? targetDim.left : (bodyWidth / 2);
     let targetWidth = targetDim && targetDim.width || 0;
     let targetHeight = targetDim && targetDim.height || 0;
 

diff --git a/src/components/popover/test/basic/main.html b/src/components/popover/test/basic/main.html
@@ -18,22 +18,29 @@
   </ion-buttons>
 </ion-navbar>
 
-<ion-content #popoverContent padding>
+<ion-content #popoverContent>
   <ion-list>
-    <button ion-item (click)="presentListPopover($event)">
+    <button ion-item (click)="presentListPopover($event)" class="e2eOpenListPopover">
       Present List Popover
     </button>
   </ion-list>
 
-  <button block (click)="presentListPopover($event)" class="e2eOpenListPopover">
-    Present List Popover
-  </button>
+  <ion-grid style="padding: 10px 0;">
+    <ion-row>
+      <ion-col width-50 primary>
+        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
+      </ion-col>
+      <ion-col width-50 style="text-align: right;">
+        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 
-  <button block secondary (click)="presentLongListPopover($event)">
-    Present Long List Popover
-  </button>
+  <div padding #popoverText class="text-to-change">
+    <button block secondary (click)="presentLongListPopover($event)">
+      Present Long List Popover
+    </button>
 
-  <div #popoverText class="text-to-change">
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
 
     <button block secondary (click)="presentNoEventPopover()">