Rotate Text inside of repeating group

Anyone know of a good way to rotate text?
I know elements have a Rotation angle which is great but it doesn’t rotate the transform controls (or the handles of an element) which kind of defeats the purpose…

This leads to a gigantic repeating group because the text inside of a repeating group won’t fit, unless it is scaled vertically and if you scale it vertically then it won’t fit into the repeating group itself. I did find a little trick to get it to somewhat work. Please see image below.

The top part of the screenshot was the closest I could get to rotating the text on an angle inside of the repeating group (as you can see it also gets cutoff). The bottom part of the screenshot is what Im trying to get.

Any suggestions? I get the feeling it may not be possible?

1 Like

Hey @luminrabbit :wave:

Thanks for the post and I hear you on this one! I actually have a section in one of my personal apps where I’ve built something very similar. It’s definitely tricky to rotate the text and continue working with it within the constraint of the RG size.

That being said, one trick I’ve found is to get the text at the angle / size you want similar to what you’ve done, and then when you’re ready to bring each cell closer together, select your RG and use the width setting in the property editor to make it skinnier. (My favorite way is to click into that input, hold shift and click my down arrow). This will force the RG to get smaller which will bring the text elements much closer together as a result. I feel pretty confident you should be able to accomplish something very similar to the second screenshot you shared by doing this.

Give it a try and don’t hesitate to reach out with any additional questions to Support@Bubble.io

Hi Andrew,

I greatly appreciate the response and support trying to solve this one but it seems there is still a clipping issue which made me choose a different design which is ok :slight_smile:

I was kind of doing somewhat the same thing, I would make the RG two columns then stretch it across the page, grab the text element, once rotated on an angle, then put it into the RG, then increase the columns of the RG and lastly shrink it down but this also results in clipping.

A true 90 or -90 degree works pretty well as long as you put the text element as far to the left as you can before resizing the width, which can be handy down the road.

@Andrew.Vernon Again thank you very much for taking the time to write this I’m sure it will help others :grinning:

Always happy to help! Best of luck with the rest of the build! We’re here to help if anything else comes up → Support@Bubble.io

Hey @judicael.perrot

Glad that was helpful! I ran into the same thing. Unfortunately, only workaround for that is to make the text box as small as possible, and to use custom CSS, along with the responsive settings of the RG to find a solution that works. Honestly, it’s not perfect on my end, but I was able to get pretty close…