Dropdown customization

Hello

How can I create the same dropdown as on bubble website (see screenshot).
I don’t know how to do 2 things:

  1. How to insert dynamic value to placeholder (e.g. to show e-mail as on bubble web).
  2. How to add icons to choices list.

Thx in advance.

Not sure I can see the screenshot, did you upload it? :wink:

However, I think:

  1. it’s about using the dynamic option type for the dropdown. Then you can define the caption being ‘current option’s first name current option’s last name’

  2. we don’t support this yet, we use the browser native component (which is good for multiple platforms), hence are a bit limited there. We’ll add this at some point though.

Hi, Emmanuel

Yep, forgot to attach. Here it is.

Re p. 1: the thing is that dynamic option assumes that choices are dynamic (btw I need fixed). But when I click on placeholder field it doesn’t provide me with an opportunity to put dynamic filed at all.

Maybe it’s a bug?

1 Like

To mimic that menu, I believe they used a “Group Focus” that is displayed when a transparent button over the email address is pressed. The items listed in the group is probably static and probably doesn’t rely on a repeating group. They are probably just placed there directly as images and text in a regular group.

Edited with an example

Scott, thank you.

Unfourtunately I’m unable to open the link you sent (cannot go further than “We are loading your app”). I don’t know maybe it’s a problem on my end.

Anyway I understood what you meant.
Replicated it in my app, but came up with another problem.
The new focus group is displayed beneath floating group in my header despite of the fact that I clicked bring to front several times. Any ideas why it works that way?

Can you share a link? I’m aware of some issues we have there. There is usually a way to do it, but sometime it requires some extra steps in sending to front, back, etc. We’ll fix that at some point but if you post a link I can look into it.

Here is a link: https://bubble.io/page?type=page&name=main&id=finterest&tab=tabs-1
Pls see current username on the top of the page (in the middle).

I just checked, I don’t see any focus group on that page. Did you remove it?

Emmanuel,

Sorry about that. I’ve just added it back. PLease check now.

See what I did. Basically moved the group with focus inside the floating group. You’ll tell me it’s larger so you can’t, but you can manually change the height with numbers and it can then be higher than the parent :smile: A little hacky, we’ll fix that at some point, but it works!

3 Likes

Hi, Emmanuel.

Yep. It works now. Thank you.

1 Like

Manually change the height!!! Awesome!!

1 Like