Style set but height not changing

[zachleigh]

I'm probably just being really stupid, but this doesn't seem to be working for me. I'm using Webpack to compile my JS. I have this in my main JS file:

import autosize from 'autosize';
autosize(document.querySelectorAll('textarea'));

And in my HTML I have a simple textarea:

<textarea id="description" class="" name="description"></textarea>

In the browser, the initial styles are being set on the element:

<textarea id="description" name="description" style="overflow: hidden; word-wrap: break-word; resize: none; height: 40px;"></textarea>

However, the height is not changing. What am I doing wrong here?

[jackmoore]

Sorry, I do not know. I'm afraid there isn't enough information but a demo would help. Do you mean that the height is not changing when typing into the textarea?

It looks like autosize is being applied, based on that inline style. If the height is not responding to your input, my guess is that there is either a JavaScript error preventing autosize from working, or there has been some sort of DOM cloning going on that replaced the original textarea elements with new DOM elements that carried over the inline style but are not actually associated with autosize.

[zachleigh]

Solved this. Had something to do with the way I was using Vue. Used this blog post to figure it out: https://medium.com/@ScriptMint/autosize-textarea-in-vue-js-bbf3ccf3e7e3

Thanks for the great package @jackmoore !

[kargpfen]

@zachleigh The article is no longer available. Can you describe what you have to do to make autosize work in Vue?