Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize textarea in Meteor

I'm trying to create an edit page, where the user can edit his content in a textarea resized to fit the content and I'm using this plugin to do that: http://www.jacklmoore.com/autosize/

But when I access the edit page the textarea doesn't resize to fit the content, this only happens if I refresh the page manually. Here is the code:

<template name="postEdit">
    <textarea autofocus name="content" type="text" value="">{{content}}</textarea>
</template>

Template.postEdit.rendered = function() {
     $('textarea').autosize(); 
};

I also tried with Meteor.defer, but it doesn't work:

Template.postEdit.rendered = function() {
    Meteor.defer(function() {
    $('textarea').autosize();
 });     
};

When I refresh the page manually and the textarea finally resizes, the textarea html changes for this:

<textarea class="review" name="review" type="text" value="" placeholder="Blablabla" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 664px;"></textarea>

Is there any problem with my code or my approach is wrong?

Thanks.

like image 387
swayziak Avatar asked Oct 21 '22 13:10

swayziak


1 Answers

As it states in the 'Known Issues & Solutions' Docs of jQuery Autoresize you might want to do:

Template.hello.rendered = function(){
    $('textarea').autosize().show().trigger('autosize.resize');
}
like image 150
nooitaf Avatar answered Oct 23 '22 03:10

nooitaf