Text Area Increase with text

I’m wondering if it is possible to automatically increase the height of a text area field? I have a text area that can have multiple lines of text and I would like the height of the text area to increase so that all of the text will fit in the text area.

Thank you

I don’t think there is a style setting you can use, but you could bind the height/basis of the component against the length of the content in the props.value property.

That’s quite hard to get right though.
You have to consider the width of the text area and the width of each character so you know how many you can fit on a line, then consider that words might be sent to the next line because they’re too long to fit, leaving less than the allowed number of characters on certain lines, and there’s padding, newlines, etc…

If you have some formula to figure this out, I’ll take it !

What would this look like?

The width DOES matter, so this is always going to be way easier in coordinate containers due to the flexy width of the component in other containers.

pixel_height_per_row = 12  # season to taste
pixel_width_per_character = 3
characters_allowed_per_row = 50  # This value depends on the width
needed_row_count = len(self.props.value) / characters_allowed_per_row
self.position.height = needed_row_count * pixel_height_per_row
pixel_height_per_row = 12  # season to taste
pixel_width_per_character = 3
# this is probably a better approach, rather than the hard-coded value approach
alternate_characters_per_row = self.props.width / pixel_width_per_character  
needed_row_count = len(self.props.value) / alternate_characters_per_row
self.position.height = needed_row_count * pixel_height_per_row

There’s no way to get the width of the component in a flex-type container so you have to rely on some

I tried something like this, but it’s frankly unreliable.
As I mentioned, what happens with a text like “foo barbarbarbar” in a text area 10 characters wide ?
You’ll have “foo” on the first line, then “barbarbarb” on the second, and “ar” wrapped on a third.
But len("foo barbarbarbar") / 10 will return 1 !
That can be mitigated a bit by using math.ceil, so that it at least return 2, but we’re still missing one line.
And that’s not even accounting for newlines, fonts with variable character width, and probably many more things.

I was doing something like

line_height = 12
char_per_line = 30
return sum(ceil(float(len(line)) / char_per_line) for line in text.split('\n')) * line_height

And even that is far from satisfactory.

1 Like

Oh, I agree it’s ugly - which is why I always supply more space than is needed.

Is there a technical limitation as to why using a basis of auto can’t work like it does with a label in a column flex container? Or just a “has not been implemented yet, could be a feature request”?

It’s hard to do even when you actually have control over the webpage:

1 Like

A basis of auto looks at what space the elements of the component need, but modifying text length doesn’t modify the size of the encapsulating element.