Skip to main content
Solved

Resizing instance width of a component to fit content

  • October 14, 2022
  • 4 replies
  • 6845 views

ShaunWall

Hello friends,

I’m sure the answer is obvious, I haven’t had luck search previous topics as I’m not really sure what to search for; so apologies if this is a repeat.

My issue is:

  • I have a Button component, the top level’s width is set to Fill and contains an auto layout container
  • I make an instance of that component
  • I set the text to something longer than the original component
  • The top level of the instance does not expand to fit its contents

I’ve seen a bunch of posts about conflicting width sizes, a fixed bug from earlier in the year about component resizing options not being reflected in instances; but I’m not sure if this is related to those or just me not understanding nested resizing methods.

Any help would be really appreciated!

Best answer by ShaunWall

I figured it out: for whatever reason, I had the structure as:

  • Component
    – Auto layout
    — Text
    — Icon

when it should’ve just been:

  • Component (with auto layout enabled)
    – Text
    – Icon

Thanks for your help, friends!

View original
This topic has been closed for replies.

4 replies

tank666
  • 4873 replies
  • October 14, 2022

Instead of “Fill container” set “Hug content”.


Derek_Avila

So you want a component that fills the container but also hugs the content?
You can have the autolayout in the top level of the component, set default to hug but the alignment options to center, When you need the button to fill its container, only set the component to fill. Hope that helps


ShaunWall
  • Author
  • 1 reply
  • Answer
  • October 14, 2022

I figured it out: for whatever reason, I had the structure as:

  • Component
    – Auto layout
    — Text
    — Icon

when it should’ve just been:

  • Component (with auto layout enabled)
    – Text
    – Icon

Thanks for your help, friends!


  • 1 reply
  • February 2, 2024

Perfect solution! Thanks for commenting!


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