Skip to main content
Jesse_Wallace
New Participant
March 17, 2022
Question

Autolayout bug in nested components

  • March 17, 2022
  • 21 replies
  • 5947 views

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
March 24, 2022

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
March 29, 2022

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

Frank_De_Graeve
March 29, 2022

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
March 29, 2022

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
June 15, 2022

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

Onno_Personal
New Member
November 3, 2023

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

Alice_Holm
Active Member
November 6, 2023

I haven’t solved it 😦

Onno_Personal
New Member
November 7, 2023

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

September 16, 2024

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
September 17, 2024

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