Resize textarea in Meteor

Question

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.

Palstave

If you enter $('textarea').autosize(); in the console of your browser when the page is loaded and it doesn't work, the plugin is not loaded correctly. – Ayacucho

Thanks for your comment, when I enter that in the console, it prints this <textarea type=​"text" value style class=​"review" name=​"review" placeholder=​"blablabla">​</textarea>​ , <textarea tabindex=​"-1" style=​"position:​ absolute;​ top:​ -999px;​ left:​ 0px;​ right:​ auto;​ bottom:​ auto;​ border:​ 0px;​ padding:​ 0px;​ box-sizing:​ content-box;​ word-wrap:​ break-word;​ overflow-x:​ hidden;​ -webkit-transition:​ none;​ transition:​ none;​ height:​ 0px !important;​ min-height:​ 0px !important;​ width:​ 564.65625px;​" class=​"autosizejs">​</textarea>​ , but the text area doesn't resize – Palstave

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> – Palstave

What happens if you do $('.review').autosize(); – Ayacucho

the problem might be that you trigger resize on both, the mirror element and your intended textarea. not sure tho.. – Ayacucho

When I enter $('.review').autosize(); nothing happens, the textarea only resizes when I refresh the page – Palstave

The console only prints this: <textarea type=​"text" value style class=​"review" name=​"review" placeholder=​"Blablabla">​</textarea>​ – Palstave

It's normal that the console is printing the object you interact with. I tried with an example app and the plugin you used and it works with autosize().show().trigger(... , check my answer. – Ayacucho

Answer 1

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');
}

Ayacucho

Answer 2

The actual problem is that the DOM is not fully loaded when you call the plugin. This should work:

$(function(){
    $("textarea").autosize();
});

Fourposter

Thanks, I tried that inside Template.postEdit.rendered but it doesn't work – Palstave

What if you try it in a script tag? Also ensure the plugin is actually loaded (i.e. check in the resources tab of developer tools) – Fourposter

Something like this? <script type="text/javascript"> $(function(){$("textarea").autosize();});</script> Which is the best place to put this script, on main.html? The plugin is loaded – Palstave

Yes, that should be working. You can put it wherever you want, as long as it's in the client part – Fourposter

It doesn't work, not even when I refresh the page manually :/ – Palstave

Answer 3

I'm no jQuery expert, but if I'm remembering correct, you can do this:

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

Chao

Answer 4

Just try this way

$(document).ready(function(){
 $('textarea').autosize();   
});

Illogicality

Thanks, I tried that inside Template.postEdit.rendered but it doesn't work – Palstave