Kevin Powell - Community•15mo ago

position of a div moves when zoomed out even though its is offset by another div via js

SO i wanted to postion this div with respect to another div, so i used getBoundingClientRect() to get the refernce div and offsetted it by px , now im having issues where when i zoomed out its not next to the reference div, how do i fix this?

const teamMembermodal = document.querySelector(".card-member");
const modalModal = document.querySelector(".member-modal");

const teamMembermodalposition = teamMembermodal.getBoundingClientRect();
const modalModalposition = modalModal.getBoundingClientRect();

modalModal.style.left = parseInt(teamMembermodalposition.right) + 20 + "px";
modalModal.style.top = parseInt(teamMembermodalposition.top) + 5 + "px";

const teamMembermodal = document.querySelector(".card-member");
const modalModal = document.querySelector(".member-modal");

const teamMembermodalposition = teamMembermodal.getBoundingClientRect();
const modalModalposition = modalModal.getBoundingClientRect();

modalModal.style.left = parseInt(teamMembermodalposition.right) + 20 + "px";
modalModal.style.top = parseInt(teamMembermodalposition.top) + 5 + "px";

3 Replies

Coder_Carl•15mo ago

You would need to set up an event listener on the zoom probably because you (Im guessing) have set the x & y based off the details before zoom

Avinash•15mo ago

it worked.

const teamMembermodal = document.querySelector(".card-member");
const modalModal = document.querySelector(".member-modal");

const updateModalPosition = () => {
  const teamMembermodalposition = teamMembermodal.getBoundingClientRect();

  modalModal.style.left = parseInt(teamMembermodalposition.right) + 20 + "px";
  modalModal.style.top = parseInt(teamMembermodalposition.top) + 5 + "px";
};
updateModalPosition();

window.addEventListener("resize", () => {
  updateModalPosition();
});

const teamMembermodal = document.querySelector(".card-member");
const modalModal = document.querySelector(".member-modal");

const updateModalPosition = () => {
  const teamMembermodalposition = teamMembermodal.getBoundingClientRect();

  modalModal.style.left = parseInt(teamMembermodalposition.right) + 20 + "px";
  modalModal.style.top = parseInt(teamMembermodalposition.top) + 5 + "px";
};
updateModalPosition();

window.addEventListener("resize", () => {
  updateModalPosition();
});

Coder_Carl•15mo ago

Woo. Love the easy wins

Gaming

Programming

position of a div moves when zoomed out even though its is offset by another div via js