Skip to main content
Question

Creating dynamic Component with Auto Layout with components of different alignments

  • October 19, 2023
  • 1 reply
  • 932 views

Hi all,

Struggling with a design problem. While attempting to design a dynamic component that embeds multiple other components, I can’t seem to figure out a way to have some of these components as left aligned while the rest are right aligned. See below for the pattern (to be clear, I would like the buttons to be docked to the right):

I need auto layout wrapped around the entire component, because I need to maintain the spacing between the embedded components should a variant within any of them be tweaked by the user of the pattern.

In effect, it seems like what I really want is the ability to utilize the spacing functionality of auto layout, but not the alignment functionality?

For more context, I can provide details of my current settings for the auto layouts of embedded components/parent component/etc. if anyone replies to this.

Thanks!

This topic has been closed for comments

Nate_G
  • Power Member
  • October 20, 2023

@Queenan_Patrick There are multiple ways to approach this, but below is one example.

  • I have everything within an auto-layout frame and the inner elements are set to fill-container — this helps make the inner form elements more responsive.
  • Then the form elements + buttons are in another auto-layout with everything inside it, except the buttons, set to fill-container.
  • I then align the contents of that frame to the right, which moves the buttons to the right.

See example file


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings