CODEWITHSUNDEEP
javascriptcss
Grady D
Grady D

Reputation: 2019

why is style.height not being added?

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.

Upvotes: 2

Views: 61

Answers (2)

Jakub Pałach
Jakub Pałach

Reputation: 85

if you need !important try:

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

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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>

Upvotes: 4

Related Questions