Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Jun 14, 2016
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/components/popover/popover.ts
View file
Open in desktop
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
View file
Open in desktop
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