Keeping elements next to each other

major_groove · 2020-12-27T12:34:42.317Z

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!

Screen Shot 2020-12-27 at 13.33.191294×498 126 KB

Screen Shot 2020-12-27 at 13.33.281380×534 51.5 KB

cmarchan · 2020-12-27T14:10:01.217Z

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

major_groove · 2021-01-15T22:46:55.677Z

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.

cmarchan · 2021-01-15T22:52:09.453Z

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!

major_groove · 2021-01-16T11:58:11.959Z

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

Screen Shot 2021-01-16 at 12.56.22920×354 6.62 KB

boston85719 · 2021-01-16T15:08:26.721Z

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

Bubble

ScheduleMe - Calendly Clone Template for Bubble

ScheduleMe - Calendly Clone Template page on Bubble. Use this template to speed up your app development. Bubble lets you build web apps without any code.

Screen Shot 2021-01-16 at 10.01.18 PM

I have the text element trigger this workflow

Screen Shot 2021-01-16 at 10.02.51 PM1039×420 52.9 KB

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

Screen Shot 2021-01-16 at 10.03.47 PM

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

fontawesome.com

Font Awesome Examples

Font Awesome, the iconic font and CSS framework

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?

major_groove · 2021-01-16T16:56:02.551Z

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!