scrollHeight not resetting after programmatically changing content

Question

I am trying to learn a few things without jQuery. Here is one of the challenges I'm facing. I have a fixed contenteditable div that when adding text to the div, if the `scrollHeight` exceeds the `clientHeight` I shrink the font until content fits the div. Occasionally I "rebuild" the text which replaces the `innerHTML` programmatically. Or the user can delete text which should reduce the `scrollHeight`, but in both cases, the `scrollHeight` remains the maximum value. I need some way to increase the font size to "fit" the div again. (that ideally isn't super expensive) Example: My `clientHeight` = 142, and the `scrollHeight` = 158. A loop reduces the font size, until `scrollHeight` is 142. Then, the user deletes a line of text, but the `scrollHeight` is still 142, no change. code to reduce/increase height: ``` var textBox = document.getElementById('text'); var current, min = 6, max = 14; current = textBox.style.fontSize.substr(0, textBox.style.fontSize.length - 2); current = parseInt(c…

Accepted Answer

I was on the same boat, but with an `iframe`; I'm not sure if my solution suits your chat window because its for page transitioning, but after some testing this is my hack. `"content"` is the id of an `iframe` and this is executed inside a javascript function that is called when the page change is needed:

```
var c=document.getElementById("content");
c.width=0;
c.height=0;
c.src="page.html";
```

the `src' assignment method expands the values set to 0 right after, achieving the desired result; there may be a way for you to constantly re-size a text area like that; however, I had visual issues with you; I ended up using timers so that the change would take place while the transition between pages was transparent.

scrollHeight not resetting after programmatically changing content

Solution

Problem