Alpine.js Auto Textarea Height
Playing
01. Alpine.js Auto Textarea Height

Episodes

0%
Your progress
  • Total: 6m
  • Played: 0m
  • Remaining: 6m
Join or sign in to track your progress

Transcript

00:00
In this snippet, we're going to enable auto height expansion on a text area when the user types. You might have seen this before. We have a text area on a page. As we start typing, it grows in height.
00:13
And then, of course, when we reduce what we've typed, it also shrinks as well. So this is very, very simple to do. It can be done just in a couple of lines. And then we'll just kind of refactor this down to a few lines just within a text area just to make it look nice and tidy on the page.
00:29
So we're starting out here with a fresh HTML document. I've gone ahead and pulled Alpine in here, but that's pretty much it. And I have this open in my browser so we can just see this here. Okay, let's start with the actual text area itself.
00:43
It doesn't really matter too much what this looks like. I'm going to skip giving this an ID, columns, and rows for now. But let's go ahead and add a placeholder in here. So let's just say type something just to make it look a little bit more friendly.
00:55
And that's pretty much it. So the default behavior of a text area when we start typing, of course, we have this kind of inner scroll. And that's really important. We're going to use that property, that scroll height property, to match the actual height in CSS of the text area.
01:13
So let's get started. We've got Alpine pulled in. I'm actually going to pull each of these attributes down to a new line here just to make things look a little bit nicer. And let's go ahead and start out with our X data.
01:23
Now, at the moment, we're not going to do anything with this resize method that we're going to implement. Let's just log something out for now. So let's just do a console log in here and just say invoked. And what we're going to do is have this work on initialization of this Alpine component.
01:42
So we're going to invoke resize. And we're also going to have this invoke when we type something. So we can say X on input resize as well. You can also, if you prefer, use at input.
01:55
I just prefer using the X on prefix here. Okay, let's just try this out. So let's bring up our console and let's just see what happens. So, of course, that's invoked when we hit this.
02:05
And when we start typing, that is also invoked. And that includes, of course, line breaks as well because it's an input event within JavaScript. So now what we want to do is expand the style height of this text area based on the scroll height. Let's look at that scroll height for now.
02:23
So let's do a console log here. And to access the actual element that this particular Alpine component is on, we can use L, so element. And we can just log out the scroll height here. And let's just see what that gives us.
02:38
So on initialization, this is 34. So that's the pixel height of the input. We can just verify that by heading over to our element inspector, coming under computed. And you can see here that, sure enough, we've got a height of 30 with 2, 1 here for the padding and the border,
02:55
which, of course, 3 on each side makes up 6. That's why we get 34 because, of course, the border isn't taken into effect but the padding is. That doesn't really matter too much, though. We're just kind of figuring out why this is.
03:10
So let's go ahead and just start to type something, go down. And you can see that as I come down within this inner scroll, this gets bigger. Now we can take this value and we can apply it to the overall height of our text area. So let's go ahead and do that now.
03:24
So let's say L style, and let's get rid of scroll height for now, and set the height on this to the scroll height of that element. Now this won't work because, of course, what we need to do is append on a pixel value. That's really, really important. Let's try this out and see what happens.
03:41
So as you can see on initialization, that got a tiny, tiny bit bigger. But let's go ahead and start typing now. And you can see it's kind of working here. It looks a little bit odd.
03:51
And when we actually reduce the amount of text that we have in the text area, this still continues to grow. Now the reason for this is we're not resetting this every time we call resize. It's really important that we do that. Let's do that now by just setting pretty much anything we want.
04:06
You could even set an initial class or set this up however you wanted. Let's go ahead and set this to 40 pixels just as our kind of starting point here. So now I'm going to start typing. I'm going to come down a line.
04:17
Notice that that doesn't start to increase like it did before because we're originally setting this to 40 pixels. But as we start to come down now, you can see this is now expanding. Now the other reason that we added in this initial reset of the height is because now when we start to reduce this, it's going to set this to 40 pixels.
04:37
Then it's going to go ahead and set it to the scroll height. So we're always seeing this kind of reset and then kept up to date in terms of the actual scroll height that we've got. Now, of course, what you could do as well, if you wanted a little bit of extra room underneath this, you could go ahead and add a value to the scroll height.
04:56
So, for example, you could add on 20 to the actual scroll height and then append on pixels. Let's go ahead and try that out. So as we go down, you can see we always keep a little bit of gap at the bottom. You don't need to do that, but that's just something that you can do if you need to.
05:13
So that's pretty much it. It's very simple in terms of the implementation. But what we want to do is kind of reduce this down to one line. Now, of course, what we could do is just pull this all up to one line.
05:23
And we are going to be doing that. But what we want to do really is create instead of this using arrow function. So let's use an arrow function here to get this working. And let's pull all this up into one line.
05:38
Make sure we, of course, end that line there as well. And we can just pull this up to one line inside of here. Still don't know the neatest thing, but it's nice that we can just attach this directly to the text area and have this work. Now, that's not working at the moment.
05:55
Let's just have a look. There we go. Just missed a colon. And there we go.
06:00
So that is now working. Our text area expands to the height of whatever we filled this with using that inner scroll height property. And that is it. So you can now just attach this to any of your text areas and have this work nicely.

Episode summary

In this episode, we walk through how to create a textarea in your app that automatically resizes its height as you type, using Alpine.js for simplicity. If you've ever seen those textareas that grow and shrink as you add or remove lines, that's exactly what we're building here!

We start with a basic HTML page, pull in Alpine, and set up a standalone textarea. Using Alpine's event handling, we connect an input event to a small resize function. This function checks the scroll height of the textarea and adjusts the CSS height property to match, ensuring the textarea grows (and shrinks) to fit your content.

Along the way, you'll see why it's important to reset the height before recalculating it and how you can tweak it (like adding extra padding at the bottom if you want). We also refactor the code into a super concise, one-liner Alpine expression that you can easily reuse on any of your own textareas.

By the end, you'll have a neat Alpine snippet that delivers that smooth auto-expanding textarea experience with almost no code!

Episode discussion

No comments, yet. Be the first!