Skip to content

Commit

Permalink
fix(popover): allow target element to be positioned at left:0
Browse files Browse the repository at this point in the history
fixes #6896
  • Loading branch information
davidruisinger authored and brandyscarney committed Jun 14, 2016
1 parent fa1537e commit ea450d4
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 13 deletions.
9 changes: 5 additions & 4 deletions src/components/popover/popover.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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;

Expand Down
25 changes: 16 additions & 9 deletions src/components/popover/test/basic/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -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()">
Expand Down

0 comments on commit ea450d4

Please sign in to comment.