I know this is a pretty simple issue, but I don’t know how to keep elements next to each other. This isn’t specifically about responsiveness (I think?), just in general.
e.g. in this screenshot I have a Text Element for the URL, and an Icon for the copy button. The URL can be of variable length - how do I always get the Icon to append to the end of the URL Text Element?
Not knowing this sort of thing is probably one of the main reasons my apps just get steadily more and more ugly as I develop them! 
Yes. It is about managing responsiveness which deals mostly with grouping elements and managing widths.
Select the text element and icon, right click, choose “group them” (or something similar to this). This will group both elements. Set it’s responsiveness … example … set it to be fixed width.
There is a great video on responsiveness … long but will be worth your while > https://www.youtube.com/watch?v=2N8LTaIThvQ
1 Like
Got to be honest, I watched that video, and it didn’t really help me. I can’t workout what to do on my example above. Nothing I try to do makes the copy element, butt up to the profile url.
e.g. in this screenshot I have a Text Element for the URL, and an Icon for the copy button. The URL can be of variable length - how do I always get the Icon to append to the end of the URL Text Element?
One good action > Nest these two elements under one group, set it to fixed width, leave all text elements unchecked just make sure that its height accounts for the size of the font and it’s line spacing … see what happens)
Best of luck! 
1 Like
Sorry, I feel pretty dim here, but I am not getting this. Any chance you could show me in this one page I have made?
To make it simple I have just made a text element, that is wider than the actual text. Normally this would be dynamic so the amount of text in there would change. All I want is that the icon adjoins to the end of the text box - so presumably the text box needs to shrink when it is smaller.
I tried what you suggested with the groups, but can’t get it to work.
here is the editor, if you get a chance: Stevenmarketplace | Bubble Editor
This is not necessarily an issue with responsiveness…a quick way to fix this is to use the font awesome icon inline with your text so that they are part of the same text element and the icon will always appear at the end of the text
Here is a screen shot of a text element from my scheduling template
I have the text element trigger this workflow
which is probably the same type of workflow you are currently using triggered by an icon element.
to create that and choosing any font awesome icon you can put an icon element on the page and choose the icon you want then look at the name
You want that part in red that starts with fa to be in the text element as my example
You can also check out the font awesome website to find others that may not be in the list provided by the icon element
as well as this link to do some more things with icons
Once I figured this out I always tried to use icons in text elements
Looking at your screenshot though, it seems like you already knew this trick because your grey + Follow button seems to employ this technique…
if not, how did you get the icon in the button?
2 Likes
after all that, this is what solves the issue! So simple.
I actually was using the Aircopy plugin there, instead of the regular Workflow, but I can’t remember why. The only thing it especially gave me was a nice little pop-up when the text was copied. I have replicated that with a little GroupFocus that appears then disapears after a pause. Seems excessive to use a workflow to get a pop-up to appear, but it is part of the same “copy” workflow so I suppose not too much extra strain on Bubble.
here we go: https://www.loom.com/share/7ec101e863ba4e83a0bac08870222bb5
oh that button you referred to - the + was just a regular +. And it was already there is the template anyway. If you feel like solving more dumb responsive problems, I have a couple here still! Show Bubble: Miniature (Warhammer etc) painting website
Thanks for the help!
