CODEWITHSUNDEEP
javascripthtml
John Smith
John Smith

Reputation: 4353

element.getBoundingClientRect constantly returning the initial value

I've got a div with text that follows the cursor (setting its transform:translate in the mousemove event).

One more thing it does, is setting the maxWidth accordingly if the popup would go past the viewport's right border - the text div gets thinner, but higher.

While the above works well, for whatev reason div.getBoundingClientRect refuses to report the text div's height after the max-width has been applied - it constantly returns the initial value. This problem occurs only within the script, though. Should I query it from the console, the proper (updated) height is returned. Why is that so?

const div = document.querySelector("#div");
const p = document.querySelector("#p");

document.addEventListener("mousemove", e => {
  div.style.maxWidth = "400px";
  div.style.transform = `translate(${e.pageX}px, ${e.pageY}px)`;

  const bRect = div.getBoundingClientRect();
  p.innerHTML = bRect.height;

  if (document.documentElement.clientWidth < bRect.right) {
    div.style.maxWidth = document.documentElement.clientWidth - e.pageX + "px";
  }

  ;
});
#div {
  max-width: 400px;
  display: grid;
  place-items: center;
  outline: 1px solid black;
  position: absolute;
  pointer-events: none;
  word-break: break-all;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}
<p id="p"></p>
<div id="div">
  Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.
</div>

Please simply move your cursor towards the right border.

Upvotes: 1

Views: 1081

Answers (1)

Kirill Simonov
Kirill Simonov

Reputation: 8481

In your code you are changing the div's max width after the BoundingClientRect is already calculated. So it first outputs the initial value and only then changes the max width and hence the height.

const bRect = div.getBoundingClientRect();
p.innerHTML = bRect.height;

if (document.documentElement.clientWidth < bRect.right) {
    div.style.maxWidth = document.documentElement.clientWidth - e.pageX + "px";
}

If you want to print the height after the div was resized, you have to call getBoundingClientRect again:

const div = document.querySelector("#div");
const p = document.querySelector("#p");

document.addEventListener("mousemove", e => {
  div.style.maxWidth = "400px";
  div.style.transform = `translate(${e.pageX}px, ${e.pageY}px)`;
  
  const bRect = div.getBoundingClientRect();
  
  if (document.documentElement.clientWidth < bRect.right) {
    div.style.maxWidth = document.documentElement.clientWidth - e.pageX + "px";
  }
  
  p.innerHTML = div.getBoundingClientRect().height;

});
#div {
  max-width: 400px;
  display: grid;
  place-items: center;

  outline: 1px solid black;
  position: absolute;

  pointer-events: none;
  word-break: break-all;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}
<p id="p"></p>
<div id="div">
  Here is some text.Here is some text.Here is some text.Here is some text.Here
  is some text.Here is some text.
</div>

Upvotes: 1

Related Questions