How do I make the elements around my text automatically go down instead of the text running into the other elements?

I wanted to make a read more section where when you click on read more, the text pushes the other elements down, and when you click to read less, the elements return to their original placement. I followed the steps similarly to an accordion feature but with text, no arrows or lines. I auto-adjusted the frame, but everything got jumbled up soon after that. Link

@JuneBug You could put that expanding/collapsing component + content inside an auto-layout frame, that way as it expands it will fill the space and push the other content down.

→ Example Prototype
→ Example File

Thank you! I feel like I’m close but not quite. I was able to successfully replicate it like you did just to test it out but now that I’m trying with the actual frame I’m working on it doesn’t work. The auto layout doesn’t apply to the bottom sheet on my frame and I’m not sure what is causing the auto-layout to not apply itself.

@JuneBug Hum🤔, that is weird. If you can share a view-only version of your file, I can take a look.

Sure! Present Mode

Frame

Ok, thanks for sharing.

It looks like you have a few elements set to “Absolute Positioning”, which will not move as you expand or collapse your About section.

So you’d need to turn off “Absolute Positioning” for those elements you want to move with the About section. And then put all that content in an auto-layout frame, so as the About section expands/collapses the content will move accordingly.

→ Example Prototype
→ Updated File + Fix

Thank you so much! I got it now.

1 Like