Hi all,
I have a List Item symbol, and I would like it to expand vertically when adding an additional line of text. In addition, the left and right icons need to remain horizontally centered within the symbol.
Thanks in advance!
Hi there! 
It’s easy enough to do this. Let me explain how:
- Set your Symbol to Smart Layout, Vertical (Top, Middle, or Bottom).
- Make sure your text layer is Auto-Height (fixed-width).
- Then put your three layers – left icon, text, and right icon – inside of a group, and set that to Smart Layout, Vertical, Middle.
- Also make sure that the icons have Fix Size applied on both axes, so they don’t stretch when the Symbol resizes.
Now when you type extra text into the text layer, the whole Symbol will expand in height, and the two icons will stay in the middle.
I hope this helps!
2 Likes
Thanks for the quick response. I can get the symbol to resize now, but the icons are not staying centered. Also, the individual who set up this library (for some reason) made the text layer a symbol, which I had to detach so I could set it to auto height. That won’t cause any issues for instances of the List Item, correct?
Thanks!
I notice actually that there is a divider line that appears to be present “below” the Symbol on the Instance, but it’s not clear where it is positioned on the Source. If there’s any overlapping, it might be causing an issue.
Could you upload a document with that Symbol Source in it (and the nested Symbols within it), and I can take a look at it for you.
Also, could you let me know what version number of Sketch you’re using.
1 Like
I’m getting an error when uploading. Tried several times.
Sorry, there was an error uploading List Item Auto Layout Help.sketch. Please try again.
Can I email you instead?
Edit: Also just want to say thank you! I did not expect such attentive help 
1 Like
Sure, you can email it to me at: redacted as email received.
And we’re always happy to help here. 
Hi there.
As you are running an older version of Sketch, some changes had been made in newer versions to how Smart Layout works. But you can still easily achieve the same result in v93.
Working from the setup I described before, simply remove the Fix Size pinnings on the left and right icons where they are in the wide Symbol, and instead apply them on their own individual sources.
Let me know if this works for you.
4 Likes
Success! Thank you so much Brett
2 Likes
Seems the headline doesn’t move left when hiding the icon unless they’re grouped with Smart Layout settings set to horizontal left to right. Am I better off waiting to fix this until I upgrade to the latest version of Sketch?
Hello again!
Apologies for the delay in replying, I had a few days away.
Based on your last post, I’ve been looking into this more – along with my colleague @dfmedrano – and the short answer is that you cannot do this 100% perfectly. The issue is that you are essentially asking the SAME element to have both horizontal and vertical properties applied, which are in contradiction with each other.
We can get it to mostly work in the latest version of Sketch v99, that includes a lot of improvements to Smart Layout, but unfortunately in v93, the version you’re currently using, there will have to be a compromise in one of the directions.
The other option you can do in the meantime is to have two different versions of the Symbol, one with the left icon, and one without. And then instead of removing the icon in various Instances, you can just swap out the whole Symbol.
I hope this helps, and if you have any more queries, don’t hesitate to let us know. 
3 Likes
No worries. I was trying to avoid adding a symbol just for this, but I won’t lose sleep over it 
Thanks again for all the help! I sincerely appreciate it.
2 Likes