Skip to main content
Jesse_Wallace
New Participant
Mar 17, 2022 3:02 PM UTC
Question

Autolayout bug in nested components

I noticed a bug that has recently appeared sometime in the past two weeks dealing with autolayout and nested components.

Our team uses master components so that we can push style changes to all variants quickly. It works great and helps keep things tidy. The only issue with this is that if you want a full-width component (for instance, a button you want to expand to the size of the mobile screen), you would normally have to take these steps:

  1. Drag a variant instance onto the frame
  2. Double click to go from the variant to the master button frame
  3. Change Resizing from “Hug Contents” to “Fill Container”
  4. Adjust the width of button width as necessary

This has historically worked but now whenever these actions are done, trying to set any Resizing option automatically chooses Fixed Width. This breaks resizing nested components.

You can view this process in the video below. I created a new master button and a small variant set, and then show how the base button width responds correct, but the variant button instances cannot be changed to a different resizing option.

Autolayout Resizing Issue

This effectively breaks many components in our design system, which is probably also breaking other users that employ similar component creating techniques.

Again, this only started happening recently and seems to be a bug in the software.
Is there a fix in the works on this?

This topic has been closed for replies.

21 replies

Jesse_Wallace
New Participant
Mar 24, 2022 2:05 PM UTC

I received a response from support that this problem has been fixed, and I just tested it out. Everything is working and back to normal for myself - I hope it is for everyone else!

Brent_Riddell1
Mar 29, 2022 8:14 AM UTC

Yes, can also confirm everything works again, huge relief!

Frank_De_Graeve
Mar 29, 2022 4:06 PM UTC

I am still having issues. I’m trying to understand if this is related to this bug or not.
any help would be greatly appreciated.

Basically I’m using a “Placeholder” component nested in another component and I want to be able to swap out the placeholder with just about anything else, and have the parent component adapt according to what is inside of it.

I’ve explained it in this video.

Frank_De_Graeve
Mar 29, 2022 4:47 PM UTC

Ignore comment above… I fixed it by wrapping the contents items in another frame with autolayout and set that to “hug”.

Carry on… Nothing to see here…

Alice_Holm
Active Member
Jun 15, 2022 8:30 AM UTC

I’m having issues with this. Auto-layout is only working in the main component, not the instance. See video

Onno_Personal
New Member
Nov 3, 2023 9:55 PM UTC

Having the same expanding menu as you and the same problem!
Did you solve it?

Alice_Holm
Active Member
Nov 6, 2023 10:27 AM UTC

I haven’t solved it 😦

Onno_Personal
New Member
Nov 7, 2023 10:03 AM UTC

Hi @Alice_Holm , posted my similar problem here and got a solution for it! Perhaps that also solves your issue.

Sep 16, 2024 6:24 PM UTC

I’m having this problem too… other threads are suggesting to use Hug, but (like you) that’s not helping. Any updates?

Alice_Holm
Active Member
Sep 17, 2024 11:38 AM UTC

I didn’t see @Onno_Personal 's post until now, but that worked for me, so thank you! It worked by making the parent frames of the menu (the collapsed and expanded) hug contents and the children frames one level inside of it fixed so it keeps the width.
image