mirror of
https://github.com/keepassxreboot/keepassxc-browser.git
synced 2026-03-11 08:54:43 +00:00
fix autocomplete position when body position is relative (#840)
Fix autocomplete position when body position is relative
This commit is contained in:
parent
729b513587
commit
a6410474f1
2 changed files with 20 additions and 7 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue