Materialize: Textarea not resizing with dynamic content

[klugjo]

When filling up the textarea dynamically, the textarea is not resized automatically.

Even when the textarea gains focus, it is not resized.

It would be great if the textarea was resized on focus and not only on keyup keydown.

[klugjo]

Code pen

http://codepen.io/anon/pen/doRXge

[dbauszus]

As a quick workaround for now I am calling this function when I dynamically populate a textarea.

function resizeTextArea(textarea){
    var hiddenDiv = $('.hiddendiv').first();
    if (hiddenDiv.length) {
          hiddenDiv.css('width', textarea.width());
          textarea.css('height', hiddenDiv.height());
    }
};

[acburst]

Have you tried this on the latest master version? I just tried putting the codepen code in a test page and it works. I've made many changes to the textarea resizing that havent been released yet.

[klugjo]

I have just tried again with the latest master and I am still having the issue. Can't seem to get it working.

What do you get exactly ? Is the textarea resizing on focus or directly when filling up the control ?

[dbauszus]

Adding focus to the autoresize function makes the text areas resize when focus is put on the element. I use the workaround to resize the text area after dynamically populating the textarea by setting its value with jQuery.

[klugjo]

Hi @dbauszus yes your workaround would definitely work, guess I will use that in the meantime.

Cheers,

[acburst]

I've just put your codepen code into a testpage on the latest version and it is working for me.

[redstrike]

I'm using v0.97 installed from Bower, and this bug is still around.
Did you fix it in master? Is there any quick patch for this?

[klugjo]

Hi @redstrike,

This what I do: call this function on page load or document ready.

function resizeTextAreasOnFocus() {

        function resizeTextArea($textarea){

            var hiddenDiv = $('.hiddendiv').first();
            if (!hiddenDiv.length) {
                hiddenDiv = $('<div class="hiddendiv common"></div>');
                $('body').append(hiddenDiv);
            }

            var fontFamily = $textarea.css('font-family');
            var fontSize = $textarea.css('font-size');

            if (fontSize) { hiddenDiv.css('font-size', fontSize); }
            if (fontFamily) { hiddenDiv.css('font-family', fontFamily); }

            if ($textarea.attr('wrap') === "off") {
                hiddenDiv.css('overflow-wrap', "normal")
                    .css('white-space', "pre");
            }

            hiddenDiv.text($textarea.val() + '\n');
            var content = hiddenDiv.html().replace(/\n/g, '<br>');
            hiddenDiv.html(content);


            // When textarea is hidden, width goes crazy.
            // Approximate with half of window size

            if ($textarea.is(':visible')) {
                hiddenDiv.css('width', $textarea.width());
            }
            else {
                hiddenDiv.css('width', $(window).width()/2);
            }

            $textarea.css('height', hiddenDiv.height());
        }

        $('body').on('focus', '.materialize-textarea', function () {
            resizeTextArea($(this));
        })
    }

[jsduffy]

I'm using this from the CDN and still have this issue. Thanks for the workarounds, but I hope that this gets resolved in the master.

[redstrike]

@klugjo Thank you very much! It works perfectly.

It seems that this bug hasn't been fixed in https://github.com/Dogfalo/materialize/compare/v0.97.0...master. How could we re-open this issue?

[klugjo]

@acburst Others are having the same issue ? Can you reopen this or do you need a new issue ?

Thanks !

[Dogfalo]

We'll take another look today this weekend

[acburst]

Finally fixed in f9d6d9b90e1fa7cfd22d250ed8e8bcb356a6b9d4. There is no workaround to this because .val() does not trigger any events. So I added a custom event called "autoresize" which you have to manually trigger after any .val() changes.

$('#textarea1').val('New Text');
$('#textarea1').trigger('autoresize');

[redstrike]

@acburst How about the case of preloaded content which is returned from the server-side? Ex: I want to edit a record, the server will grab the data in db and render it in textarea, so I will make changes to that textarea by focusing on it. The textarea should expand itself because the content was filled and overflowing, the user needs to see the whole of content to edit it easily. I think:

$('#textarea1').trigger('autoresize');

is too redundant for this kind of behaviour / UX. Or do we need some init code for textarea like select?

$('textarea').material_textarea();

[jsduffy]

This could be my own mistake, but I'm trying to use

$('.materialize-textarea').trigger('autoresize');

to fix a bunch of textareas and still not getting anything.

[flieks]

i updated to 0.97.0
i added this

 $('body').on('focus', '.materialize-textarea', function () {
           $(this).trigger('autoresize');
        })

which is triggered when focusing but it's not resizing the textarea

@klugjo your workaround works fine
@klugjo seems 'input' event gives strange behavior (collapse and then expands the textarea)

[timgilbert]

Following up on the above two comments, I'm also not seeing the 'autoresize' event have any effect in 0.97.

[PrinceJohn]

Doesn't work for me either in 0.97. My workaround is this:

function resizeTextarea( textarea ) {
var hiddenDiv = $('.hiddendiv').first();

if (hiddenDiv.length) {
    hiddenDiv.text( textarea.val() + '\n');
    var content = hiddenDiv.html().replace(/\n/g, '<br>');
    hiddenDiv.html(content);

    hiddenDiv.css('width', textarea.width());
    textarea.css('height', hiddenDiv.height());
}

}

Which is pretty similar to @dbauszus workaround, except that I add text to the hiddendiv so that it has a height.

[thelinuxlich]

Autoresize event is not working for me on 0.97 too

[mikeholford]

This was happening to me too. Just check it is not a turbolinks problem you are having. If so try adding this https://github.com/kossnocorp/jquery.turbolinks

[kasperdam]

Me and co-worker found this solution to the issue. In our opinion a little cleaner and works like a charm :)

$('textarea').each(function () {
//Calculate number of lines
var numberOfLines = $(this).val().split(/rn|r|n/).length;

//Get lineheight from CSS
var lineHeight = $(this).css('line-height');

//Convert from px-string to number
lineHeight = lineHeight.replace("px", "");

//Calculate height for textarea
var textAreaHeight = numberOfLines*lineHeight;

//Convert from number to px-string
var stylingTextAreaHeight = "".concat(textAreaHeight).concat("px");

//Set textarea height to calculated height
$(this).css("height",stylingTextAreaHeight);
});

[ajmalhassan]

When I pasted some text into the Textarea using my mouse it didn't resize but for ctrl+v it resized so what I did is this:

$('#l-textarea, #w-textarea, #c-textarea').on('mouseleave',function(){ $('#l-textarea').trigger('autoresize'); $('#w-textarea').trigger('autoresize'); $('#c-textarea').trigger('autoresize'); });

after I host the site I'll post the url here

if there is a better way, please do tell me.

UPDATE: here is the link lettercounter

[SlawomirLaba]

not working for me in 0.98

edit:
works in codepen

I have no idea whats the problem then

[ne0guille]

same here

[tomscholz]

@ne0guille Just writing "same here" doesn't help and to quote @SlawomirLaba "I have no idea whats the problem then", well I guess if is works in codepen, but not in your app, then it's a problem with your app

[SlawomirLaba]

after watching the problem closely, the attribute height for textarea element is not overwritten on change, maybe Im missing initialization of some kind

I copy pasted the exact code from the materialize web page

manual resizing works

I dont do anything dynamically yet, only input from keyboard so manually calling resize is not an issue

this is html from materialize web page:

      <form class="col s12">
        <div class="row">
          <div class="input-field col s12">
            <textarea id="textarea1" class="materialize-textarea" style="height: 45px;"></textarea>
            <label for="textarea1" class="">Textarea</label>
          </div>
        </div>
      </form>

my project:

<form class="col s12">
    <div class="row">
        <div class="input-field col s12">
            <textarea id="textarea1" class="materialize-textarea"></textarea>
            <label for="textarea1" class="">Textarea</label>
        </div>
    </div>
</form>

as you can see, height attribute is missing for style

also, this element is a part of card tab, this might cause the problem

[ne0guille]

i've found out that if a refresh the page where i got the text area, the resizing works correctly, but if i navigate from another page to the textarea, its stop working and the height attributre is missing as well

[DanielRuf]

see https://github.com/Dogfalo/materialize/issues/4613#issuecomment-298391853 if this helps

[newoutlaw98]

This is still an issue in v0.100.1.
The text area does not autoresize after coming back from a java servlet call that populates the control.

[Update: 8/17/2017]
I fixed my issue by adding this code in every .js file related to the html file that contains a materialize-textarea.

$(function () {
$('#textareaname').trigger('autoresize');
});

[Rblock919]

I'm having an issue where my home page has all my materialize settings, looks nice, etc etc. But when I forward to a new .jsp with a java servlet, the materialize settings are all lost. Even if I forward back to the exact same page all of the settings are lost.

I'm relatively new to programming and extremely new to materialize. I tried looking up solution in materialize documentation and googling everyone. This thread contains the closest information to my problem I've found yet.

I know that the URL changes to appname/servletname so possibly this has something to do with it? Also if I have a web.xml forward an empty url (appname/ ) to the index.jsp page then the settings also don't apply. I can only get materialize settings to work if I type in the proper url into my browser. Ex.) appname/html/index.jsp

[DanielRuf]

Please create a new issue for this. Is materialize.js loaded?

[oabdalla]

I am still having the same issue while using the latest version of Materialize textarea. It can only resize to display all text if I hit the down key.

[iMerica]

Issue persists for me

[Dogfalo]

If you change the textarea using javascript, it will not trigger any events, so you have to call this where the parameter should be replace with the proper textarea element in your own code.

 M.textareaAutoResize($('#textarea'));

[mrbianchi]

Thanks @Dogfalo , final answer (v1.0 beta)

[taras-yorku]

I had an issue with resizing and input field initialization when I want to display a form in a modal. I solved it by calling the following code every time the modal was displayed:

M.updateTextFields();
  $('.materialize-textarea').each(function (index) {

          M.textareaAutoResize(this);
       });

[globularcluster33]

tdak you're a genius! thank you so much!

[melboone]

Issue still persists for me. Can't seem to fix it.

[uy-rrodriguez]

Dear all,

In my case the resize seems to work fine, but it seems the function is not taking into account the padding. The style for my textarea is:

textarea.materialize-textarea {
    line-height: normal;
    overflow-y: hidden;
    padding: .8rem 0 .8rem 0;
    resize: none;
    min-height: 3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

If I remove the padding, the size calculated for multi-line texts fits perfectly. If I leave the padding, then only half of the last line is visible.