0
228
ViewsGet coordinates of element inside dropdown
I got a dropdown list and want to show some information on hover for each element.
I tried something like this, with item being the list elements and infobox being a fixed positioned div providing the information:
item.addEventListener("mouseover", (e) => {
e.stopPropagation();
if (e.target === e.currentTarget) {
dropdownInformation.category_id = selectOptions.category_id[index];
document.getElementById("infobox").style.left = e.target.getBoundingClientRect().x + "px";
document.getElementById("infobox").style.top = e.target.getBoundingClientRect().y + "px";
}
});
How'd I get the correct coordinates of the right border of the list entries?
(Yes, I did read several other questions regarding that topic on SO)
·
Juan Pablo Isaza
1 answers
Answer question0
Okay, this seems to do the trick. I needed to add / subtract the width / height of the parent element and the scrollbar.
item.addEventListener("mouseover", (e) => {
e.stopPropagation();
if (e.target === e.currentTarget) {
dropdownInformation.category_id = selectOptions.category_id[index];
e.target.style.borderLeft = "2px white solid";
document.getElementById("infobox").style.left =
(e.target.getBoundingClientRect().x +
e.target.getBoundingClientRect().width +
(e.target.parentElement.offsetWidth -
e.target.parentElement.clientWidth)) + "px";
document.getElementById("infobox").style.top =
(e.target.getBoundingClientRect().y -
(e.target.parentElement.getBoundingClientRect().height / 2)) + "px";
}
});
·
Juan Pablo Isaza
Report
Answer question