fix autocomplete position when body position is relative (#840)

Fix autocomplete position when body position is relative
This commit is contained in:
Cyprien Devillez 2020-04-24 08:51:24 +02:00 committed by GitHub
parent 729b513587
commit a6410474f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 7 deletions

View file

@ -227,9 +227,18 @@ kpxcAutocomplete.updatePosition = function(inputField, elem) {
}
const rect = inputField.getBoundingClientRect();
div.style.top = Pixels((rect.top + document.scrollingElement.scrollTop) + inputField.offsetHeight);
div.style.left = Pixels((rect.left + document.scrollingElement.scrollLeft));
div.style.minWidth = Pixels(inputField.offsetWidth);
const bodyRect = document.body.getBoundingClientRect();
const bodyStyle = getComputedStyle(document.body);
if (bodyStyle.position.toLowerCase() === 'relative') {
div.style.top = Pixels(rect.top - bodyRect.top + document.scrollingElement.scrollTop + inputField.offsetHeight);
div.style.left = Pixels(rect.left - bodyRect.left + document.scrollingElement.scrollLeft);
} else {
div.style.top = Pixels(rect.top + document.scrollingElement.scrollTop + inputField.offsetHeight);
div.style.left = Pixels(rect.left + document.scrollingElement.scrollLeft);
}
};
// Detect click outside autocomplete

View file

@ -82,15 +82,19 @@ kpxcUI.updateIconPosition = function(iconClass) {
kpxcUI.setIconPosition = function(icon, field) {
const rect = field.getBoundingClientRect();
const bodyRect = document.body.getBoundingClientRect();
const bodyStyle = getComputedStyle(document.body);
const offset = Number(icon.getAttribute('offset'));
const size = Number(icon.getAttribute('size'));
const size = (document.dir !== 'rtl') ? Number(icon.getAttribute('size')) : 0;
icon.style.top = Pixels((rect.top + document.scrollingElement.scrollTop) + offset + 1);
if (document.dir === 'rtl') {
icon.style.left = Pixels((rect.left + document.scrollingElement.scrollLeft) + offset);
if (bodyStyle.position.toLowerCase() === 'relative') {
icon.style.top = Pixels(rect.top - bodyRect.top + document.scrollingElement.scrollTop + offset + 1);
icon.style.left = Pixels(rect.left - bodyRect.left + document.scrollingElement.scrollLeft + field.offsetWidth - size - offset);
} else {
icon.style.left = Pixels((rect.left + document.scrollingElement.scrollLeft) + field.offsetWidth - size - offset);
icon.style.top = Pixels(rect.top + document.scrollingElement.scrollTop + offset + 1);
icon.style.left = Pixels(rect.left + document.scrollingElement.scrollLeft + field.offsetWidth - size - offset);
}
};
/**