Skip to main content

I’m trying to create a component for the header of a dropdown menu, which has two elements inside a frame:



  1. A text box with left-aligned text that should be anchored to the left edge of the frame.

  2. A dropdown arrow icon that should be anchored to the right edge of the frame.


The text should be allowed to expand as far as it can rightwards, but should get cropped when it hits the dropdown arrow icon.


My issue is I’m trying to make it so I can resize the outside frame larger or smaller and I want the textbox to expand or shrink as needed so the text stays anchored to the left and the icon stays anchored to the right.


I feel like this should be easy to do with auto layouts, but when I try the icon just stays floating out in space and doesn’t stay anchored to the right edge of the frame.


Thanks!

I put this example dropdown together a while back. It uses auto-layout to make the heading + arrow, and dropdown elements all responsive.


→ Get example file

→ View prototype example


image

Terms & ConditionsCookie settings