Auto Expanding text area based on content

API & Custom Code Show & Tell
1

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
2

Superb!!

3

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?

4

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

5

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

6

Hey everyone, I hope you’ve been enjoying these code snippets. I wanted to let you know that all of my code is now available on my new platform, Appknowledged. Appknowledged has taken over from KnackMods. I encourage all of you to sign up—it’s completely free—and you’ll have access to all of my free content.