Auto Expanding text area based on content

If you potentially have alot of text in a small area it can be quite annoying to scroll through such a small window like this…

Screenshot 2023-04-19 at 23.18.34

With this small snippet of JS the height changes according to the content inside as you type to this…

Screenshot 2023-04-19 at 23.21.18

Javascript

$(document).on('knack-scene-render.any', function (page) {
    $("textarea").on('input', function() {
    var scroll_height = $("textarea").get(0).scrollHeight;   
    $("textarea").css('height', scroll_height + 'px');
    });
});  

“Psst… I’ve got something really big brewing, and can hardly contain my excitement! I’m thrilled to announce that the new platform coming dedicated to giving us all the marketplace to share knack code & tutorials. Stay tuned”

8 Likes

Superb!!

Can this work in an iframe? I use iframes on my website, and think it is irritating to scroll down through text. Will this work?

@TravisLind38612 Is the knack app embedded in a external site or are you using iframes inside knack?

Hey, I am using an embedded iframe in an external site (wordpress.)