How to let button component auto resize from the right

Ask the community
1

Hi!

I’m using a button in mobile headers aligned right. At first, i made these buttons part of the navigation components just using a frame with auto layout for the buttons inside those components and everything worked fine. You can see the button here:

And this is how it resizes the button when i change the text:

Later on i decided to make components for these mini buttons themselves so i could manage them in one place and add variants. But suddenly, the resizing from the right doesn’t work anymore once the frames are out of there navigation component and placed on their own, eventually as a component.
So this is the button component: Dropbox - Button component.png - Simplify your life
And this is what happens when i change text. The button expands from the left to the right instead of right to left:
Dropbox - Button component resizing.png - Simplify your life

Am i doing something wrong? How can i fix this? Thanks for looking into this! :slight_smile:

2

Extra thingy: got this far that the main component does resizing right, but an instance of the same component does it wrong:

3

I have managed to achieve the same result.

Reproduction steps:

  1. Create a component;
  2. Add new variant;
  3. At the moment, we are not setting up the constrains, we will leave them at the top and left.
  4. Add an instance of this component to the canvas or frame;
  5. Change the variant constraints to the top right;
  6. Add a new instance to the canvas or frame;
  7. Check both instances (the first instance will grow from left to right, the second from right to left).

Since your copy is on the canvas, no constrins are visible. And, most likely, you added this instance when the variant constrains were on the left.

Add a new instance or place an existing one in a frame to change the constraints.

1 Like
4

Thank you, i get it now. The button needs another frame or component to be in, in order to let the alignment for scaling work. I’m used to Sketch, where it’d also work on the canvas.

Yay! I’ll close this one.

5

Here you go :slight_smile: