How do I get a parent group to adjust its size to the child (hug contents)?
I have a UI with a parent group and a child icon and text. The UI should adjust its width based on the width of the text inside it. It seems that I can only set a fixed width for the parent group and I can't dynamically adjust the width of the parent group during runtime based on the text value.
I want to do this to keep the side padding consistent. It's like the autolayout feature in Figma.
I don't believe there's a very straightforward way to do this but you can basically create 4 bones for each corner of your shape and bind them to your text box. If you need padding, you need to place the bones inside individual groups, and then transform constrain the group to the text box. You can then move the bones around freely to add padding.
There's a video tutorial here with more information:
Thank you! A bit fiddly but this works great.
However there are some constraints and I've had to compromise on my implementation:
the artboard size doesn't grow with the width of the content since you can't apply dynamic sizes to the artboard – I suppose this is fine if you disable clipping on the artboard, but it means I can't load these artboards during runtime with the accurate artboard width. Not sure if it will it return the artboard width (including the unclipped art.
it's much more complicated when I set the anchor of the text to the right side. I expect it to also push out the icon but it doesn't
It's complicated to align it side by side when you nest the artboard
Not sure if you have any advice on this. I tried using distance constraint but it wasn't working as I was expecting (keep distance between the two nested artboards).
As a heads up, this will be MUCH easier once we release the layouts feature. No set date yet, but it's coming soon!
Hi Robert, layout has been out but when testing it inside rive it works but when testing it in the rive.rip it doesn't work and it keeps the original size of the artboard.. https://rive.app/community/files/14460-27264-auto-grow-artboard/
here is my rive. Anything i'm doing wrong? I have the artboard set to hug