vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #418

pull/426/head
cagataycivici 2020-08-04 15:56:47 +03:00
parent 7fb409d6ac
commit f4994764fb
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/utils/DomHandler.js
View File

@ -190,14 +190,18 @@ export default class DomHandler {
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) { if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight; top = targetOffset.top + windowScrollTop - elementOuterHeight;
element.style.transformOrigin = 'bottom'; element.style.transformOrigin = 'bottom';
if (top < 0) {
top = windowScrollTop;
}
} }
else { else {
top = targetOuterHeight + targetOffset.top + windowScrollTop; top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top'; element.style.transformOrigin = 'top';
} }
if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width) if (targetOffset.left + elementOuterWidth > viewport.width)
left = targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth; left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
else else
left = targetOffset.left + windowScrollLeft; left = targetOffset.left + windowScrollLeft;
@ -206,26 +210,36 @@ export default class DomHandler {
} }
static relativePosition(element, target) { static relativePosition(element, target) {
var elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element); let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
var targetHeight = target.offsetHeight; const targetHeight = target.offsetHeight;
var targetWidth = target.offsetWidth; const targetOffset = target.getBoundingClientRect();
var targetOffset = target.getBoundingClientRect(); const viewport = this.getViewport();
var viewport = this.getViewport(); let top, left;
var top, left;
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) { if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
top = -1 * (elementDimensions.height); top = -1 * (elementDimensions.height);
element.style.transformOrigin = 'bottom'; element.style.transformOrigin = 'bottom';
if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top;
}
} }
else { else {
top = targetHeight; top = targetHeight;
element.style.transformOrigin = 'top'; element.style.transformOrigin = 'top';
} }
if ((targetOffset.left + elementDimensions.width) > viewport.width) if (elementDimensions.width > viewport.width) {
left = targetWidth - elementDimensions.width; // element wider then viewport and cannot fit on screen (align at left side of viewport)
else left = targetOffset.left * -1;
}
else if ((targetOffset.left + elementDimensions.width) > viewport.width) {
// element wider then viewport but can be fit on screen (align at right side of viewport)
left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
}
else {
// element fits on screen (align with target)
left = 0; left = 0;
}
element.style.top = top + 'px'; element.style.top = top + 'px';
element.style.left = left + 'px'; element.style.left = left + 'px';