From a6410474f141e6b5380ebf4c224da1144c62b2cc Mon Sep 17 00:00:00 2001 From: Cyprien Devillez Date: Fri, 24 Apr 2020 08:51:24 +0200 Subject: [PATCH] fix autocomplete position when body position is relative (#840) Fix autocomplete position when body position is relative --- keepassxc-browser/content/autocomplete.js | 13 +++++++++++-- keepassxc-browser/content/ui.js | 14 +++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js index 8bc789e..87db5b5 100644 --- a/keepassxc-browser/content/autocomplete.js +++ b/keepassxc-browser/content/autocomplete.js @@ -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 diff --git a/keepassxc-browser/content/ui.js b/keepassxc-browser/content/ui.js index a870972..87e83da 100644 --- a/keepassxc-browser/content/ui.js +++ b/keepassxc-browser/content/ui.js @@ -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); } + }; /**