Autoresize textarea with max height

[SuperDOS]

I tried the newly added min attribute for textarea but wonder if it's possible to combine somehow with a max height so it can't expand further but have a scrollbar?

also when setting a value to the textarea it won't expand until you click it and press enter. document.getElementById('DemoTextarea').value = "demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext demotext";

[leonardorafael]

Hi @SuperDOS ,

Unfortunately set a value from textarea directly from JS will not work, because we can't detect the change on JS to resize it. But, you can use innerHTML or textContent. This will change the DOM and do the job automatically. Other way is to call ui() function after set the value of textarea.

FYI: Using innerHTML or textContent on textarea you still can get the value of textarea with element.value.

Method 1

document.getElementById('DemoTextarea').innerHTML = "...";

Method 2

document.getElementById('DemoTextarea').textContent = "...";

Method 3

document.getElementById('DemoTextarea').value= "...";
ui();

See the codepen here https://codepen.io/leo-bnu/pen/LYvaOPz. Hope this helps!

[SuperDOS]

@leonardorafael Thanks that works! Had another question if it's possible to combine min somehow with a max height so it can't expand further than let's say 250px but scrollable?

[leonardorafael]

Humm, we don't have anything like that today. But in future, I guess we can combine with existent helpers like small-height, medium-height, large-height like:

<div class="field border label textarea min small-height">
   <...></...>
</div>