How to display images within dropdown box?

How can we display images in the dropdown, following is the link to editor.

abc00001 | Bubble Editor

Thank you.

there is no way to do it, you would have to do your own dropdown, you can do it with a button or text in the form of a dropdown and a hidden group below that contains images with collapse of animation slide up / down, when the button or text is clicked the group It is visible.

1 Like

I think what Joe is saying is there’s no native solution but it’s straightforward to build something in Bubble that does this by simply assembling a few elements (e.g., an input field, a dropdown group, a list of images) and adding in logic to show/hide the different pieces so that the user will think it’s a normal dropdown with photos.

Have a look at the free Search & AutoCorrect plugin. Install that.

  1. Use an input field instead of a search box.
  2. Build a simple RG in a Group just below the input field that looks like a dropdown and put your image and text in the RG just as normal using a Do a Search for. Then set the group to be hidden on page load and put a condition on it that it is visible when the input field is focused.
  3. Drop the Search& AutoCorrect element onto the page (it will be invisible in run mode) and point it to the input box and tell it which fields to search.
  4. Go back to the RG and set a condition ‘When input field is value is not empty’ then Data Source = Search & AutoCorrect’s matches.
  5. Now build a simple workflow that when a user taps an element in your ‘fake’ drop-down, that the value of the input field is set to that cell.

That plugin is one of the plugins I use most often. Take a look at this thread for more information and for links to a live demo and the editor to see how it was used New Plugin- Fuzzy search and autocorrect, custom search boxes the demo even has a dropdown with book images and associated text like you say you need.

3 Likes

Thanks, the plugin will do great.

This topic was automatically closed after 70 days. New replies are no longer allowed.