Smart Layout not behaving as expected in Symbol

Hi,
I have created a symbol component from multiple other symbol components as shown.
When I select “No symbol” in the inspector panel to hide a row symbol the button symbol loses its intended position and clashes with the rows.

However, When I create this component as a group (not a symbol) with Smart Layout it works as expected.

Is this a bug or a settings error on my component ?

screen recording link here:

Sketch Verison 100.1
Mac OS 12.7.5

Hello @marktmcewan :wave: ,

Thank you for your post. We are happy to help you here.

We’ve checked out the video, and based on that, everything should be working fine. However, it’s hard to pinpoint the problem accurately just by looking at the video.

Could you do us a favor and shoot an email over to productsupport@sketch.com with a sample document that includes this component? This will help us properly identify and troubleshoot the issue.

Rest assured that all your data will be kept confidential and will only be used for the purpose of resolving this matter.

Looking forward to receiving your email.

Cheers :pray:

1 Like

Hey Cris, of course. I will do it now. Thanks.

1 Like

Hi Mark. :wave:

Thanks for sending that file through. The reason there is an overlap happening in the main Component when you hide one of the nested Symbols is because there is an overlap of -1 between each of the rows. If you set this to 0 (no overlap), then it works as expected.
See here: CleanShot 2024-07-08 at 13.33.45 · CleanShot Cloud

And the reason that it works when you use Groups instead of Symbols is because the Groups’ boundaries are determined by the content within them, so there is no overlap between them, whereas the Symbols’ boundaries are determined by the Artboard they are sitting on.

I hope this helps explain the situation. :pray:

2 Likes

Ah OK, I can work around this info and remove the spacer layer that is causing the overlap and rebuild the component. Great Stuff, thank you for looking at it so quickly.

2 Likes