# Text Area Increase with text **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [June 1, 2022, 2:33pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260 "2022-06-01T14:33:15Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![csilk](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@csilk](https://forum.inductiveautomation.com/u/csilk)\ **Post date:** [June 1, 2022, 2:33pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/1 "2022-06-01T14:33:15Z")
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 ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 1, 2022, 2:44pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/2 "2022-06-01T14:44:42Z")
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. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 1, 2022, 2:55pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/3 "2022-06-01T14:55:15Z")
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 ! ---
**Author:** ![csilk](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@csilk](https://forum.inductiveautomation.com/u/csilk)\ **Post date:** [June 1, 2022, 2:56pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/4 "2022-06-01T14:56:37Z")
What would this look like? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 1, 2022, 3:11pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/5 "2022-06-01T15:11:50Z")
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. ```auto 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 ``` ```auto 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 ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 1, 2022, 3:18pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/6 "2022-06-01T15:18:44Z")
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 ```python 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. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 1, 2022, 3:31pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/7 "2022-06-01T15:31:20Z")
Oh, I agree it’s ugly - which is why I always supply more space than is needed. ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 1, 2022, 3:39pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/8 "2022-06-01T15:39:05Z")
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”? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [June 1, 2022, 3:41pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/9 "2022-06-01T15:41:20Z")
It’s hard to do even when you actually have control over the webpage: > **[Auto-Growing Inputs & Textareas | CSS-Tricks](https://css-tricks.com/auto-growing-inputs-textareas/)** > > By default, and elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 1, 2022, 3:58pm UTC](https://forum.inductiveautomation.com/t/text-area-increase-with-text/60260/10 "2022-06-01T15:58:22Z")
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.