why is style.height not being added?

Question

I have the below code and it runs without any issues but for some reason the height is never set.

function expandTextarea() {
    var textareas = document.getElementsByTagName('textarea');
    for (var i = 0; i < textareas.length; i++) {
        if (textareas[i].scrollHeight > 100) {
            textareas[i].style.height = textareas[i].scrollHeight + 'px !important';
        } else {
            textareas[i].style.height = '100px !important';
        }
    }
}

The old for this exact same function is,

jQuery('.disabled-textarea').each(function() {
    if(jQuery(this).prop('scrollHeight') > '100') {
        jQuery(this).attr('style', "height:" + jQuery(this).prop('scrollHeight') + "px !important");
    } else {
        jQuery(this).attr('style', "height: 100px !important");
    }
});

It works without any issues. I am just trying to move away from jQuery.

See http://stackoverflow.com/questions/462537/overriding-important-style/1577204#1577204 — George, Nov 09 '15 at 20:45

score 4 · Accepted Answer · answered Nov 09 '15 at 20:44

Removing !important fixes it:

function expandTextarea() {
    var textareas = document.getElementsByTagName('textarea');
    for (var i = 0; i < textareas.length; i++) {
      console.log(textareas[i].scrollHeight);
        if (textareas[i].scrollHeight > 100) {
            textareas[i].style.height = textareas[i].scrollHeight + 'px';
        } else {
            textareas[i].style.height = '100px';
        }
    }
}

expandTextarea();

<textarea>
</textarea>

Quite. You won't need !important if you're setting the element's style attribute anyway. — Mr Lister, Nov 09 '15 at 20:47

score 0 · Answer 2 · answered Nov 09 '15 at 20:52

0

if you need !important try:

textareas[i].style.cssText='height: 100px !important';

answered Nov 09 '15 at 20:52

Jakub Pałach

85
9

why is style.height not being added?

2 Answers2