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(current);
    if (textBox.clientHeight < textBox.scrollHeight) {
        while (textBox.clientHeight < textBox.scrollHeight) {
            current--;
            if (current < min) break;
            textBox.style.fontSize = '' + current + 'pt';
        }
    } else if (textBox.clientHeight > textBox.scrollHeight) {
        while (textBox.clientHeight > textBox.scrollHeight) {
            current++;
            if (current > max) break;
            textBox.style.fontSize = '' + current + 'pt';
        }
    }

html (incase it matters):

<div id="text" contenteditable="true"></div>

css (incase it matters):

#text {
    position: relative;
    border: 1px solid blue;
    top: 180px;
    left: 31px;
    width: 300px;
    height: 132px;
    padding: 5px;
    font-family: 'mplantin';
    font-size: 14pt;
    font-weight: 200;
}

Superscription

Answer 1

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.

Tenth

Answer 2

This seemed to fix my issue:

element.style.height = "auto";

Isleana

Answer 3

both answers from @nixahn and @jeff are working for me (chrome,ff)

iframe.style.height ="0"; // or "auto"
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<style>'+css+'</style>');
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

Konstance

auto does not work if I have initially lets say 3 rows. But 0 does the trick! – Ln

Answer 4

I have used a div with a fixed height, and the problem with auto is that it resizes the element, I fixed that with the following code after my inner HTML was set:

element.style.height = "auto"; element.style.height = "400px";

now scrollHeight is resetted correctly and gives the real height of the inner HTML

Flaring

Answer 5

I had this same issue -- A content editable div whose scrollHeight wouldn't shrink when lines were removed.

The accepted answer didn't fix the problem for me, however, removing the div's parent's display: flex; did.

Stumpy