Concatenate elements (text + icon)

Is there a way to concatenate multiple visible elements together such that as the first element grows /shrinks the second element will continue to be displayed directly next to it.

This comes up a lot and I haven’t figured out a solution yet. In my example CarDo app you can see I have placed a icon (i) inside a group that ideally is right next to the Car Make. Since I can’t figure this out the (i) is floating some distance away.

Any pointers here would be much appreciated.

Here is the live repro app: https://cardo.bubbleapps.io/

Thanks in advance.

Hey :wave:

This should do it for you.

Adding an Icon to Text Element

@j805 www.NoCodeMinute.com

Hope that helps! :blush:

3 Likes

That’s a dead link.

The link is fixed now. It should work :slight_smile: Thanks for letting me know.

That’s nice but not what I was asking for. The example I showed was simplified, but what it is supposed to show is a (i) icon that the user can click on to get more information.

In my real app, I was planning to have an Edit and Delete icon. Each would be hidden until I clicked them. Moreover, they should appear immediately to the right of the variable length text element (in my example the name of the car make).

More like this below where the edit and del options are actually clickable elements initiating separate workflow:

Something Long Text. [:pencil2:edit] [ⓧdel]
Short Txt [:pencil2:edit] [ⓧdel]
Some super duper lengthy text anomoly [:pencil2:edit] [ⓧdel]
Blah Blah [:pencil2:edit] [ⓧdel]
and so on [:pencil2:edit] [ⓧdel]

Following. Looking for the same but for (text+group)

Hey @sean9,

Sorry I misunderstood your original request. Maybe something closer to something like this

Editor: https://bubble.io/page?type=page&name=linkinicon&id=805testapp42&tab=tabs-1

Preview: https://805testapp42.bubbleapps.io/version-test/linkinicon?debug_mode=true

They use links, which you would just choose to do something on page load if you need an action.

Hope that helps! :blush:

@Boost is this what you need?

1 Like

This is a great technique. I’d probably need those links to be dynamically created but think that is doable using this technique.

The one problem I have with this technique is a visual design issue. Since these clickable icons repeat multiple times, in a repeating group, I would prefer to only have them visible when hovered over. It will make the UI look much cleaner not having repetitive icons constantly displaying on it. Do you think this is an additional variation on what you have done or does it require an entirely different technique?

Yeah. For sure!

You can do that in the conditional tab on “when this is hovered”

:blush:

Hmm. How? The text has to be visible all the time. Only the icons need to be visible only on hover.

Damn! I wish I had seen this a few months back. Great trick, thank you.

1 Like

Right. So just add the normal “text” without the icons in the main text field if you want. Then on the conditional add the icons and say on hover then this text becomes “text + icons”

If you want me to do it in the example I can show you on Monday. :blush:

Today is my 13 year wedding anniversary so I’m not “working”. :wink:

1 Like

Happy to help out. That’s why the forum is so awesome. A great ‘meeting of the minds’.

“There is success through many advisers!”

Please do not spend more time on bubble forums on your anniversary. My wife would be less than pleased if it were me. :slight_smile:

I think you explained the technique perfectly. I will give it a try over the weekend.

Happy Anniversary!

Not quite

Maybe I should open up a new topic for this.

I’m looking for something that would adjust the width of a text box when the dynamic value becomes shorter/longer

That way, the background color would align with the text

Hey @Boost,

I used this in my chat feature on my site, maybe this is something similar to what you might need. At least in the element width being dynamic. Check it out: https://widgets.airdev.co/bubble-widget/stretch-to-fit-messenger-1496772972510x651241166982799700

@j805 www.NoCodeMinute.com

Hope that helps! :blush:

1 Like

So I just added another example for you, so on hover it shows the icons. Here you go: https://bubble.io/page?type=page&name=linkinicon&id=805testapp42&tab=tabs-1

Hope that is what you were looking for. :blush:

1 Like

haha I thought the same thing. @J805 Nice!

2 Likes

I wasted about 3 hours trying to get a V to look like a drop down icon using the RTE. :blush:

Glad to help! :blush: