|
|
@@ -99,14 +99,29 @@ export function getOptimalPosition( { element, target, positions, limiter, fitIn
|
|
|
|
|
|
let { left, top } = getAbsoluteRectCoordinates( bestPosition );
|
|
|
|
|
|
- // (#126) If there's some positioned ancestor of the panel, then its rect must be taken into
|
|
|
- // consideration. `Rect` is always relative to the viewport while `position: absolute` works
|
|
|
- // with respect to that positioned ancestor.
|
|
|
if ( positionedElementAncestor ) {
|
|
|
const ancestorPosition = getAbsoluteRectCoordinates( new Rect( positionedElementAncestor ) );
|
|
|
+ const ancestorComputedStyles = global.window.getComputedStyle( positionedElementAncestor );
|
|
|
|
|
|
+ // (#126) If there's some positioned ancestor of the panel, then its rect must be taken into
|
|
|
+ // consideration. `Rect` is always relative to the viewport while `position: absolute` works
|
|
|
+ // with respect to that positioned ancestor.
|
|
|
left -= ancestorPosition.left;
|
|
|
top -= ancestorPosition.top;
|
|
|
+
|
|
|
+ // (https://github.com/ckeditor/ckeditor5-utils/tree/t/139)
|
|
|
+ // If there's some positioned ancestor of the panel, not its position must be taken into
|
|
|
+ // consideration (see above) but also its internal scrolls. Scroll have an impact on Rect which,
|
|
|
+ // again, is relative to the viewport, while position: absolute includes scrolling.
|
|
|
+ left += positionedElementAncestor.scrollLeft;
|
|
|
+ top += positionedElementAncestor.scrollTop;
|
|
|
+
|
|
|
+ // (https://github.com/ckeditor/ckeditor5-utils/tree/t/139)
|
|
|
+ // If there's some positioned ancestor of the panel, then its rect contains it's border
|
|
|
+ // while `position: absolute` positioning does not consider it. E.g. { top: 0, left: 0 }
|
|
|
+ // means upper left corner of the element, not upper-left corner of its border.
|
|
|
+ left -= parseInt( ancestorComputedStyles.borderLeftWidth, 10 );
|
|
|
+ top -= parseInt( ancestorComputedStyles.borderTopWidth, 10 );
|
|
|
}
|
|
|
|
|
|
return { left, top, name };
|