Text area with fixed width but auto height (grows/shrinks vertically as text edited)
I'd like to be able to make a text area with a fixed width -- so the text automatically wraps onto multiple lines -- but with no fixed height so that the height auto fits to the text.
Basically, I want it to act like area text (fixed size) in the horizontal direction but point text (auto size) in the vertical direction.
The new auto-height option for text boxes in XD34 will do what you want it to! Check it out today.
-
Nat commented
This feature will be particularly useful now that the Stack feature is here. There's the perfect little slot of empty for it on the user interface.
-
Dipendra Bagchee commented
This would be super useful - the stack feature that was added recently would combine with this feature well - we could have content blocks with multiline heading and copy treatments that adjust layout automatically as we flow in production copy.
-
Rust commented
Need it badly.
Will be very handy to use auto-height based on line-height number perfectly snappable on grid.
For example if you have 8-pixel grid and 3 lines of text with line-height 24px - you will get a box with 72px height and not always different numbers based on font you choose.
It seems like not a big deal but i have a hard time to not have it.
Figma use it perfectly and this is one of the main reason to keep using it instead XD for big projects.
-
Andi commented
Please!!! Add this to XD! Sketch is so much more efficient. We all need possibilities like this.
-
Valentin de Bruyn commented
Please add this feature, Figma already does it pretty well.
The new Content-aware / padding features from XD 26 would be much more efficient with this feature available. -
Anonymous commented
I would like to flow in content and not have to adjust height manually to accommodate more/less text.
I would like this to ultimately work with the newly released "content aware" for layout.
-
David Johnson commented
I find it quite frustrating having to constantly update the height of my textboxes to hold the content, especially when placing other lements in proportion to the bottom of the text box. I've been using the Trimit plugin but it still feels a little unnecessary. Could there be an additional control to tell the box to be auto height or a fixed height? Like what @Brandt was saying, it would be really useful when working with a responsive component.
-
dp commented
Should work like indesign and with the auto-size (so it shrinks/grows automatically as you type ) feature available. Just installed Pablo's Text Toolbox plugin in the meantime - works great, thanks Pablo
-
Brandt commented
With the addition of Responsive Resize this is a really big deal. While my text box is now smart enough to adjust it's width during resizing it's not smart enough to simultaneously adjust it's height to show the newly truncated text. This means I have to manually go through and open all Area Text boxes and then have to go through and manually adjust all vertical spacing to accommodate the taller text area.
Another common problem is figuring out vertical padding. Area Text has no logical bottom—it's arbitrary depending on how tall you happen to draw it. For example, if I want to have an element 20px below my text, right now I can easily see how far away the element is from my text box, but not the actual text. If the text box were simply always the exact size of the copy block then I'll I'd need is the built in measurement tools to quickly get my element placed rather than using hacks and workarounds.
All-in-all, we are just asking for text to behave just like HTML text behaves in a live environment.
-
pklaschka commented
While this might not be an ideal solution, my plugin "Text Toolbox" (available in the "Discover plugins" panel as well as on https://xdplugins.pabloklaschka.de) allows to automatically adjust a text areas height to fit its content with one click or a simple keyboard shortcut. I understand that you'd like it to adjust everytime you edit the text, but my plugin might serve as an intermediate solution (since it at least saves the hassle of manually adjusting the area every time).
Disclaimer: Since I'm the developer of the plugin, I might not be unbiased and this could be seen as an advertisement. However, I do not earn anything if you use any of my plugins (they are all free and there also isn't any other source of revenue), so I'm just putting this here since it seems related.
Best,
Pablo Klaschka | Developer of "Text Toolbox" for Adobe XD -
Aleksei Koren commented
I agree, there is an option in InDesign that lets you to auto-fit area text vertically. Can it be made that as you type or place text inside the area text adjusts, and then if you need to resize the box, you just drag it down and it resizes, with an option that it refits to the text again, if you add more text. it could be an option in the Preferences to change the behavior of the area text. Thanks, Alex.
-
MK commented
This is my main use case for text fields, and given the way modern responsive websites and apps are built these days, probably the most useful in digital UX design.
Scaling point text is nice for headers and quick drafts, but anything more and area text becomes fidgety.
It would also save a lot of time knowing that the bottom of the area text box is aligned with the bottom of the text, so that we can quickly align elements under it with the correct spacing
-
ariel commented
This is seriously my biggest frustration with XD and the reason I don't normally use it as a design tool.