Auto resize textarea when page loaded

Question

I have some tags

            <div id="templates-body" class="list_templates">
                {%for i in range(0, len)%}
  
                <textarea class="template" readonly>{{templates[i]}}</textarea>
        
                {%endfor%}
            </div>

where templates = ['some template', 'very long template with more than 20 rows', 'etc.'] from python (i use flask's render_template)

result:

expecting:

How to automatically (on page load) expand a textarea (vertically) and see the full text?

does [this](https://stackoverflow.com/q/2803880/3462319), [this](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize), or [this](https://stackoverflow.com/questions/17772260/textarea-auto-height) answer your question? — depperm, Nov 28 '22 at 17:20
No. I will enter something rarely, I need this area to be displayed correctly after page load — FITUMI, Nov 28 '22 at 17:25

score 0 · Answer 1 · answered Nov 28 '22 at 17:38

Try using this JavaScript code. This will auto resize all textarea after page loads.

document.querySelectorAll('textarea').forEach((element) => {
  element.style.height = element.scrollHeight + 'px';
})

<textarea onkeyup="autoResize(this)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum magna quis magna auctor vestibulum. Vestibulum sagittis leo quam, id aliquam nisi aliquet malesuada. Sed volutpat, magna eget placerat varius, metus leo tincidunt ligula, sit amet venenatis diam diam et magna. Pellentesque purus felis, feugiat a tellus eu, pellentesque consectetur ligula. Etiam interdum venenatis mi, in feugiat sem molestie vitae.
</textarea>

<textarea onkeyup="autoResize(this)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum magna quis magna auctor vestibulum.
</textarea>

Auto resize textarea when page loaded

1 Answers1