From a99d17952ba646a9dc58f52bd3ca9dd37f99380f Mon Sep 17 00:00:00 2001 From: Asif Rahman Date: Wed, 27 Feb 2019 16:45:06 -0500 Subject: [PATCH] fix(popover): update placement per md spec (#17429) --- core/src/components/popover/animations/md.enter.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts index 39c420faf6..16c9c75ad9 100644 --- a/core/src/components/popover/animations/md.enter.ts +++ b/core/src/components/popover/animations/md.enter.ts @@ -22,9 +22,10 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev? const targetDim = ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect(); + // As per MD spec, by default position the popover below the target (trigger) element const targetTop = - targetDim != null && 'top' in targetDim - ? targetDim.top + targetDim != null && 'bottom' in targetDim + ? targetDim.bottom : bodyHeight / 2 - contentHeight / 2; const targetLeft = @@ -60,7 +61,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev? targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0 ) { - popoverCSS.top = targetTop - contentHeight; + popoverCSS.top = targetTop - contentHeight - targetHeight; baseEl.className = baseEl.className + ' popover-bottom'; originY = 'bottom'; // If there isn't room for it to pop up above the target cut it off