javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #6896
This commit is contained in:
flavordaaave
2016-06-14 23:31:59 +02:00
committed by Brandy Carney
parent fa1537e88d
commit ea450d41d3
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/popover/popover.ts
View File

@ -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;

25
src/components/popover/test/basic/main.html
View File

@ -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()">