Need assistant on auto layout


Just as shown in the image above, I want to apply a ‘hug’ constraint to all the boxes. However, for the grey box, I need to set a minimum width. Additionally, I want to ensure that the blue box remains anchored to the right, even when the orange box is resized. How can I achieve this using auto layout?

@rahend yes, you can achieve this using the awesomeness of auto-layout.

Each frame (orange, blue, gray) is set to “hug contents” and then on the main gray frame, you would set your min-width.

The trickier part is getting the blue box to stay on the right when the gray box hits its min-width and as the orange box gets smaller.

You can achieve this by adding a hidden spacer frame between the orange and blue frames. It is set to “fill container”. And then you will show (or hide) the spacer when the gray box hits the min-width.

See Example File

1 Like

Thanks, @Nate_G! I’ve given that a shot and it seems to be what I’m looking for, although the spacer does create a somewhat unexpected padding.

1 Like

You can also create a component of this and set it up so you can just toggle the spacer on and off, so you don’t have to go into the layers to show/hide the spacer

1 Like