Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Sketch

The Sketch community on Spectrum. Sketch is the ultimate tool for designing user interfaces, websites, and icons.

Sketch / Help

In symbols, is possible for the height of text areas to automatically increase?

In symbols, is possible for the height of text areas to automatically increase?

Sketch/Help · November 7, 2018 at 11:15am

In symbols, is possible for the height of text areas to automatically increase?

Sketch / Help · November 7, 2018 at 11:15am
If I have a symbol with some vertically stacked text areas in it (with fixed widths), I want the height of a text area to increase if I enter a text override that takes it onto two lines. Presumably I could then use a plugin like AutoLayout to automatically keep consistent padding between those text areas?

However, I can't seem to get this to work - if in a symbol the heights of the text areas stay the same, even if the content itself goes on to two lines.

I know text area height does automatically increase (if the width is fixed), but maybe this just isn't possible in text overrides in symbols, or am I missing something really basic?

November 7, 2018 at 11:49am

https://drive.google.com/file/d/1yARs0nuaVVSctbyv2WZR2oT6f6EDhlU0/view?usp=sharing

I've done up a test that you can download and pick apart. Don't know if it fulfills all that you require but I'm using Anima Stacks and maybe you could play with the max-width options too?

  • reply
  • like

In the stacks option, I've it set that all children are full width. Might be something to note.

  • reply
  • like

https://drive.google.com/file/d/1yARs0nuaVVSctbyv2WZR2oT6f6EDhlU0/view?usp=sharing

I've done up a test that you can download and pick apart. Don't know if it fulfills all that you require but I'm using Anima Stacks and maybe you could play with the max-width options too?

Thanks Sean, that's super helpful! I've managed to achieve what I was after by modifying your symbol.

However, when I try and create it from scratch in my own Sketch file it still doesn't work. The only difference I can see between your symbol and mine is that on your Stacked Group it has an option "Resize Symbol" enabled, whereas on my symbol that option is nowhere to be seen. I don't suppose you know how to get it to appear do you? The plugin documentation doesn't even mention it...

  • reply
  • like

Your Stacked Group...

Edited
  • reply
  • like
  • reply
  • like

My Stacked Group...

  • reply
  • like
  • reply
  • like

Oh... I've never even noticed that checkbox before...

  • reply
  • like

So... just by looking here, I think that only appears when the stacked group is inside a symbol. If it's just sitting on a canvas, it's not there.

  • reply
  • like

Very strange. I'm comparing both your symbol and mine, side-by-side on the Symbols page. The settings look to be the same, but if I copy/paste your Stacked Group into my symbol that option disappears. So it must be something to do with how I've created, or the top level settings on my symbol. I'll investigate a bit more - if I can just solve that I'll have a working solution. Worst case scenario I can just use your symbol and edit the content to match my symbol, but I would really like to know why I can't get it work when creating one from scratch. Watch this space...

  • reply
  • like

Odd! But let us know!

  • reply
  • like

Also... sometimes quitting and relaunching Sketch can fix this sort of thing...

  • reply
  • like

So I've just been talking to Anima support. Apparently that option was in an older version of the plugin, but they've removed it now. So symbols that were created when that option was available still show it, but new ones won't. A bit bizarre, but there you go.

Anyway, they are very kindly having a look at my design to see if they can achieve what I want. It seems simple (in my mind at least), but we'll see...

Thanks for helping me get this far, much appreciated!

  • reply
  • like

Attach your version and I'll see what you're trying to do!

  • reply
  • like

November 8, 2018 at 4:43pm

So after a lot of back-and-forth with Anima support it seems that what I want to achieve is not possible...

I'll put a screen grab and sketch file of what I'm trying to achieve below.

In an ideal world I would have one symbol that I can resize, where text that drops down onto two lines would push the rest of the content down AND resize the symbol, all automatically (the little black highlight should also resize to match the height of its related text area).

The Anima AutoLayout plugin gets some of the way there using a combination of nested Padding and Stacks, but you can't resize the symbol width manually, everything just starts to overlap. Also, for something so visually simple, it bugs me that the solution (if there is one) is so complex and fragile...

  • reply
  • like
  • reply
  • like

That's what I currently have ^^

And if, when I use text overrides, the text goes onto two lines, I usually have to detach the symbol and manually tidy up the layout.

  • reply
  • like

Yup... loads of little things like this in Sketch that are like this. I've had to figure out how to do loads of things with work arounds, almost.

I'll have a look tomorrow because I enjoy this sort of thing!

  • reply
  • like

Be my guest. Enjoy :D

  • reply
  • like

November 9, 2018 at 10:06am

Looks like today's your lucky day :)

It's probably not the tidiest of files but let me know how you get on with this or have any questions! Hopefully this is a solution you can use!

https://drive.google.com/file/d/1hOT3hqrRcKXnkKNDUb5gGTSBbzb1QZkD/view?usp=sharing

  • reply
  • like
  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```