Fill & Hug & Right Aligned

Hi @esteiner

You can use Auto layout to achieve what you’re looking for :

• Your Grey bounding box has to be a auto layout with a horizontal layout and a width set to hug.
• The container of the blue boxes and the container of the orange boxes also have to be an auto layout, this time with a vertical layout and a width set to hug. With the hug constraint, those containers will be as wide as their wider child

Let me know if it helped!

I was actually able to figure it out - I had to create a frame for the left aligned items and one for all the right aligned items. Thanks for the response.

I ran into another problem.
This component that I’m trying to create is a left nav with a right aligned icon for a dropdown for sub nav. And I just can’t make it work. I need the right aligned chevron to stay right-aligned, but also for the whole thing to hug the length of the longest nav text. And then for the ‘active’ and ‘hover’ state, I need to have the whole row with a background color. Help!

With dropdown menus, I don’t think it’s a good idea to use a vertical auto layout for the texts and a vertical auto layout for the icons.
An icon is more related the text on its row, they should be in the same horizontal auto layout.

What will happen if you decided to change the font or the text size? Icon auto layout will not be at the same height as the texts auto layout, so you will manually fix the heights.

I suggest you to make each text in a horizontal auto layout with its icon.
The horizontal auto layout of the option that has the longest text should be “hug” horizontally, and the other options should be “fill container” horizontally.

I had a quick play – how’s this?: https://www.figma.com/file/CfxoSulTavAsmZI11VljGl/Right-aligned-icon-nav?type=design&node-id=1%3A39&mode=design&t=LcilBGUTRmvT7Y3T-1

Yes! That is what I’m trying to do!
Can you explain a little more about how to do this, I still can’t quite figure it out.
Thank you!!!

I can’t tell from you example, but I also need the container for the nav to expand and shrink depending on the length of the text on each nav row.

The file is just in my drafts, so I think you should be able to duplicate the file and dig into the autolayout settings?: https://help.figma.com/hc/en-us/articles/360038511533-Duplicate-or-copy-files

I’ll try and explain the autolayout settings though:

Nav container: hug, hug, vertical layout, no spacing

Nav row: fill, hug, horizontal layout, auto spacing, 16px horizontal padding, 8px vertical padding

Nav label: hug, hug

Icon wrapper: hug, hug, 16px left padding

Icon: fixed, 24x24px

Thanks, I’ll try that!
🙂