Auto adjust height of an input field as text gets added?

Devin McPaul · 2024-04-01T03:42:59.295+00:00

There are two input fields here. The first is in the blue bubble. The second is in the white bubble.The blue bubble's input field isn't shrinking properly to wrap around the text. Seems like it has a set width even though I haven't set one yet. It can get bigger, but doesn't get smaller if there's less text. My goal is to have it perfectly wrap the text you input into it no matter how long or short it is.The white bubble input field also isn't handling the text properly. I want this to expand down as the user writes more text. But currently it's just truncating the visible text instead of wrapping it like a normal text editor.Does anyone know how to set these up?

Devin McPaul
1 year ago
There are two input fields here. The first is in the blue bubble. The second is in the white bubble.

The blue bubble's input field isn't shrinking properly to wrap around the text. Seems like it has a set width even though I haven't set one yet. It can get bigger, but doesn't get smaller if there's less text. My goal is to have it perfectly wrap the text you input into it no matter how long or short it is.

The white bubble input field also isn't handling the text properly. I want this to expand down as the user writes more text. But currently it's just truncating the visible text instead of wrapping it like a normal text editor.

Does anyone know how to set these up?
Devin McPaul
1 year ago
This is how I designed it in Figma, but the same settings aren't working in Toddle when I set the text to input fields instead of normal text/span.
Devin McPaul
1 year ago
Tried editing the wrap, overflow, and flex/text layouts.

No dice.

Don't have any hard heights/widths set for these, but when I shrink/expand those hard heights/widths it allows me to adjust them the way I want.

Just doesn't handle auto scaling based on the text input length properly.
Max
1 year ago
Hi @Devin McPaul! I haven't done that in Toddle but in standard CSS/HTML. Those resources helped me a lot:
https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
https://css-tricks.com/auto-growing-inputs-textareas/

I haven't checked but I'm pretty sure you can translate that to Toddle.
❤️1
Tod
1 year ago
Great energy @Max! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
Devin McPaul
1 year ago
There's a CSS editor in toddle, but I can't seem to get this to work @Max. Can you test & let me know how you get it to work?
@Devin McPaul
There's a CSS editor in toddle, but I can't seem to get this to work @Max. Can you test & let me know how you get it to work?
Max
1 year ago
I can give it a go later this week if that's enough for you
Devin McPaul
1 year ago
Yea that'd be great, thanks!
Max
1 year ago
Hi @Devin McPaul! I created a proof of concept:

https://auto_textarea.toddle.site/

https://app.nordcraft.com/projects/auto_textarea

Let me know if that helps and if this is what you are looking for. The basic idea is: You have a shadow text beneath the textarea with the same styling as your input. This text will change the height/width of the div. The textarea has "position: absolute" so that it fills the container. It is still a little rough around the edges and there are corner cases that you have to consider (empty value, line breaks...) but it should give you a good starting point 🙂
Andreas Møller
1 year ago
Nice!
An other approach is to render the textarea on top of a paragraph with the same font, size, and weight as the textarea.

The set the textarea height to 100%
That way the paragraph will make sure the container is the right size
Devin McPaul
1 year ago
Let me give both of these a try, thanks!
@Max
Hi @Devin McPaul! I created a proof of concept:

https://auto_textarea.toddle.site/

https://app.nordcraft.com/projects/auto_textarea

Let me know if that helps and if this is what you are looking for. The basic idea is: You have a shadow text beneath the textarea with the same styling as your input. This text will change the height/width of the div. The textarea has "position: absolute" so that it fills the container. It is still a little rough around the edges and there are corner cases that you have to consider (empty value, line breaks...) but it should give you a good starting point 🙂
Armand
1 year ago
@Max would it be possible to grant me access to the auto_textarea project? I'm trying to figure out how to set this up for an input element as well, but I'm not able to get it working based on the explanations here. So I figured that when I see it, I will understand.
@Armand
@Max would it be possible to grant me access to the auto_textarea project? I'm trying to figure out how to set this up for an input element as well, but I'm not able to get it working based on the explanations here. So I figured that when I see it, I will understand.
Max
1 year ago
Unfortunately no... I deleted that project 😅 What are you struggeling with?
@Max
Unfortunately no... I deleted that project 😅 What are you struggeling with?
Armand
1 year ago
Ok, no worries.

Well, I am not sure where to put each element (what goes inside what) and how to make sure they are "on top" of each other. And also, should the Input element become a Textarea for this to work?
this is what I'm trying now, but that isn't working.
@Armand
this is what I'm trying now, but that isn't working.
Max
1 year ago
It should be a textarea. There should be a surrounding div with height set to "fit-content", a "p", that has the text, like you did already. And a textarea with position: absolute and height 100%
Armand
1 year ago
So:
Div: fit-content
p (with text)
textarea: position:absolute; height 100%

Just want to make sure I got it correct
@Armand
So:
Div: fit-content
p (with text)
textarea: position:absolute; height 100%

Just want to make sure I got it correct
Max
1 year ago
Yep! There are some corner cases that you will have to catch programmatically. I don't remember all of them but I am sure that line-breaks don't behave as expected.
Tod
1 year ago
Great energy @Armand! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
Armand
1 year ago
Got it to work. @Max thanks a lot! 🙏
@Armand
Got it to work. @Max thanks a lot! 🙏
Max
1 year ago
Yes, nice! 💪🏼
Stockton
1 year ago
Is this still working?
My textarea doesn't want to resize
@Stockton
Is this still working?
Max
1 year ago
The approach still works, yes. Did you set the position to absolute and the height to 100% an the textarea?
Stockton
1 year ago
Got it! Thank you!

Man, text areas are tough 😅
@Stockton
Got it! Thank you!

Man, text areas are tough 😅
Max
1 year ago
They are 😄

Auto adjust height of an input field as text gets added?

Devin McPaul

Devin McPaul

Devin McPaul

Max

Tod

Devin McPaul

Max

Devin McPaul

Max

Andreas Møller

Devin McPaul

Armand

Max

Armand

Max

Armand

Max

Tod

Armand

Max

Stockton

Max

Stockton

Max