Issues with right aligning nested auto layouts

I have a use case:

  • I want to make a component “(image) Text”
  • I want to make a row of instances of this component, e.g. “(image) Text (image) Text (image) Text”
  • I want that entire thing to be right aligned, so if I edit one of those text fields to be longer, it should push everything to the left of it further left

For the life of me, I cannot get it to do it.

My component has the text right-aligned, so it should want to push out to the left when I add more text. But it doesn’t, the text pushes out to the right.

I figured that the text probably IS right-aligned, but however wide it gets it’s still subject to the alignment of the autolayout it’s in with the image… but that autolayout is ALSO right aligned.

Now I can get it to behave the way I think it should. If I select the image, and change the horizontal resizing from Hug to Fill Container, then change it straight back to Hug again, now it’ll correctly push the image out to the left when I add more text to the text field.

But, quite aside from the fact that feels hacky as all hell, it fails to work at the next level, when I have a bunch of instances of this in an auto-layouted row. If I start adding text to an instance of the component, it’ll push the image from the same component out to the left… But the other instances don’t move.

I can take the same approach with the row as I did with the component - select instances and flick Fill Width on/off, and eventually I can get it working how I’d expect. But the truth is, this feels very flaky. It’s making the highest level frame fixed width, and pushing the contents outside of the frame bounds. I’d have expected if a frame with an autolayout was right aligned, and set to hug its contents, then the frame would extend out to the left as the contents got bigger.

I’m really confused - something this fundamental must clearly be possible, so I can only assume I’m misunderstanding something really fundamental about how autolayout/frames work. Can anyone help me identify where I’m going wrong, please?

The auto layout alignment doesn’t really matter if that dimension is getting hugged. You’ll either have to have your container (Frame 1) be a fixed width, as you’ve pointed out, or you need to place your container in some other frame. Presumably, you’d be using this on a screen, which will have a fixed with. At that point you can either use auto layout or constraints to define where that element will be placed in the screen, and how it will grow accordingly.

Thank you!