It’s been a few times where I’d like a symbol to resize based on its content both horizontally and vertically. Is that possible?
One use case is this “55” tag shown here, that does resize horizontally if I give it a long text but I can’t figure out a way to have it resize vertically if I make the font size smaller or add a line break to the content text.
Another example would be this symbol from Sketch’s own Smart Layout video. Can you make the card background (and its content) adapt to the wider image?
My recommendation is taking a step into layers hell (lol). Do a vertical smart layout group for your content then group your content layer and the background rectangle shape. The rectangle shape should be pinned to the edges of the parent rectangle. That should allow everything to adapt. Thats how I got some of my weird components to work. Hope this works for ya.
Hi @samvermette,
I gave it a try to the Tag symbol you shared and I think I have something that can work. I’d love to hear what you think. In brief, it’s a two step process. The symbol will automatically add new lines, resizing vertically and you can then manually resize it horizontally to get the width you want. Here’s the setup:
This will add the new lines vertically
This component will have vertical Smart Layout too. In the source it’s only the text symbol and a layer for the background.
When you resize the symbol horizontally, you’ll need to use the option “Fit instance to contents” so paddings are right. The good thing is that you can set a custom shortcut for this, so it can be done really fast!
Here’s a sample file, let us know if this helps!
Horizontal and vertical directions.sketch (222.5 KB)
Thanks Jorge! This works well when dealing with the symbol instance directly, however in my case the symbol instance is nested inside another symbol, so the “fit the content” option isn’t available is that correct?
I’d love to test it Sam! Can you share a sample document so we can take a look? 
Here you can see that the label bounding box is correct but that the bounding box of Symbol B is wrong
Hey Sam!
I sent you an access request from my work account at Sketch. We cannot see any documents unless you activate Support Access or if you add me as a Guest. I think Guest works best for this, thanks in advance 
I have access to the file now, thanks! I’ll get to testing and report back
Hi Sam,
I reviewed the file and here are some notes:
This is to make the text flexible. If you set the layer to be auto width, it’ll try to grow horizontally. With the current setup, the Smart Layout group makes it grow vertically, but since the base symbol has horizontal layout the text bounding box doesn’t grow:
The previous image also shows how the artboard’s dimensions won’t change, and even if it had Smart Layout, the resulting symbol instances would grow if you add enough content to make the artboard grow, but it wouldn’t shrink.
I think we can apply the same structure as the last symbol:
Let me know if I missed anything
2-axis resize edited.sketch (72.3 KB)
Hi Jorge (and happy new year!)
Thanks for doing this and apologies for the delay in getting back to you. The issue with your solution is that I want the symbol to have an automatic width as well in addition to its height. I don’t want to give it a static width.
I updated my original file with a more concret example of why I want this. Here I would like the String text label to expand to take the available space freed up by the hiding of the “55” label.
Hey Sam! Happy New Year to you too!
Thanks for sharing the updated file. Although currently it’s not possible to have automatic width and height in the same Smart Layout component I think I can get this setup to work! I’ll get to it and report back.
Hey Sam,
I have a proposal for the component you sent! The key is to set a minimum width for the parent component. That will make the symbol on the left take up the whole space when you hide the symbol on the right. If the text is long enough to grow vertically you’ll need to adjust the height manually
Here’s a quick overview of how the symbol behaves. I added a background color so it’s more clear how height behaves and of course, the Sketch document so you can take a look.
I hope this is useful and please let me know what you think!
2-axis resize - proposal.sketch (319.0 KB)
Hi Jorge,
This doesn’t work for us because the parent component is always used inside symbol instances, so we’re not in a position to manually resize it vertically like you did. There are elements below it too so the label absolutely does need to automatically resize vertically based on its content.
Below is the exact component I’m dealing with. I want the main label to take the full width when the time on the right is hidden. But also that main label can spread on 1-3 lines, and as you can see there are other elements showing right below it.
I really appreciate all the help, but it really sounds like Sketch doesn’t properly support this and we’re mostly trying to find unofficial workarounds? Is 2-axis automatic layout on the short term roadmap? I feel like it should work with the currently available constraints. If my main label has vertical smart layout, and is pinned to its right edge, then hiding the time label should give the main label more space and make it expand further to the right no? Is there a reason why it doesn’t behave like that?
Hi @samvermette,
Thanks for sharing the component’s details! I can see now all the requirements. For now, you’ll need a variant without the time label.
When you hide the time label, the left column won’t grow because it has vertical layout, so the space just goes empty. To take up the full space, you’ll need to use horizontal layout and min-width. But when you set these, the background doesn’t resize (text does) and this is where the current limit is right now. We’re aware of this scenario and the team has documented it, although there’s no specific time yet for this to be worked on.
