diff --git a/src/editor/setPosition.js b/src/editor/setPosition.js index 88707c6..01e857d 100644 --- a/src/editor/setPosition.js +++ b/src/editor/setPosition.js @@ -1,7 +1,7 @@ /** Sets the editor position and determines a proper orientation **/ const setPosition = (wrapperEl, editorEl, annotationBounds) => { // Container element offset - const { offsetLeft, offsetTop } = wrapperEl; + const containerBounds = wrapperEl.getBoundingClientRect(); const { scrollX, scrollY } = window; // Re-set orientation class @@ -12,21 +12,20 @@ const setPosition = (wrapperEl, editorEl, annotationBounds) => { // Default orientation const { x, y, height, top, right } = annotationBounds; - editorEl.style.top = `${y + height + scrollY - offsetTop}px`; - editorEl.style.left = `${x + scrollX - offsetLeft}px`; + editorEl.style.top = `${y + height - containerBounds.top}px`; + editorEl.style.left = `${x + scrollX - containerBounds.left}px`; const defaultOrientation = editorEl.getBoundingClientRect(); if (defaultOrientation.right > window.innerWidth) { // Default bounds clipped - flip horizontally editorEl.classList.add('align-right'); - editorEl.style.left = `${right - defaultOrientation.width + scrollX - offsetLeft}px`; + editorEl.style.left = `${right - defaultOrientation.width + scrollX - containerBounds.left}px`; } if (defaultOrientation.bottom > window.innerHeight - scrollY) { // Flip vertically const annotationTop = top + scrollY; // Annotation top relative to parents - const containerBounds = wrapperEl.getBoundingClientRect(); const containerHeight = containerBounds.height + containerBounds.top + scrollY; editorEl.classList.add('align-bottom');