Use option groups for dropdowns?

Hello,

Is it possible to use option groups in dropdowns to group categories?

image

<select>
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
          </optgroup>
          <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </optgroup>
        </select>

If yes, how does one go about doing this and using dynamic data from the database.

Thanks

Check this thread

it may help

Or search the forum for custom drop downs

Thanks @boston85719 for the info, although there wasn’t any info in that thread. I left a message because Option groups is pretty standard in “Dropdowns” using the Optiongroup tag in html, so I think it should be include in Bubble at sometime. The more we include standard html components, the better.

For the moment I think the only option is building something custom.

Exactly. You could do it fairly simply with a focus group and nested repeating groups but it will have to be a custom built element.

1 Like

You are correct there…there are other benefits as well to building custom drop downs instead of using the bubble drop down element due to the limitations of the bubble element. For example, the bubble drop down element doesn’t allow for alignment of the text, so if you want something centered you need some code for it.

I think other benefits of the custom drop down as well are about design and the visualization of it as well as user experience ( like form filling ) When I build a custom drop down I am using groups that I hide or show and have the collapse height option on the group. Inside the group I have a repeating group. I think I might need to try @eli suggestion of the focus group as it probably mimics drop down behavior a bit more as it would sit on top of other elements and not need to move elements down or up when visible or hidden.

drop down

2 Likes

Any examples out there on how to build a dropdown with option groups using nested repeating groups?

Thanks

Hi guys,

I have finally achieved building a custom dropdown with optiongroups,

All the options come from the database and the selected option “Plumber” comes from the current user logged in who had the value previously saved in the database. I’m having the problem one the last bit. Once the user selects an option I can close the layer but I don’t know how to change the value of the selected option Eg. From “Plumber” to “Sister” for example.

Can anyone help me please. Just can’t seem to solve it, although I’m sure it’s easy.

@mangooly I just implemented this on mine.

You could use a state to keep it simple. Assuming this is a group, you could do:

image

Set this group to:

image

Then when a use selects an option:

image

We start a workflow to set that ‘selected’ value to:

image


Here’s your default if want:

image

image

And we set the value if it’s empty:

image

1 Like

Thanks @lantzgould, I did something a little bit different. With your solution I was getting the name of the group and not the individual item.

1 Like

The behaviour on mobile is dreadful. The layer goes all over the place and the cursor shifts 30px to the bottom. Still deciding if to fix this with CSS or go back to a native simple native dropdown that has better behaviour on all devices.

Did anyone have any of these issues? The bad behaviour is on android and IOS.

I don’t have any problems with the custom drop downs that I built using an iOS device, nor did I use CSS to create mine.

If you used CSS to create yours that is probably the issue as it is known that bubble at times will override custom CSS which renders the functions unusable, which is why it is advisable to avoid using custom CSS…at least that is what I deemed from reading various threads on the subject.

If creating a custom drop down without CSS and just using native bubble functions then there should not be a problem.

1 Like

Hi @boston85719,

I used the actual bubble components, an input, group focus and Repeating group. It doesn’t have any custom CSS.

Have you tried it on an actual Iphone or Android real device? It works very bad. From experience I always test on real devices as other methods are not reliable enough.

Yes, when you said it didn’t work I tested it and it works fine for me on an iPhone.

I don’t use a group focus, perhaps that is the issue. I use a regular group with hide/show conditionals on the group with collapse height when hidden.

Ahhh ok so you don’t use a group focus (floating layer), you push the content down. Is that correct?

Although maybe you have given me an idea, use a regular group and then position / float it on top with simple CSS. Will try it now.

Thanks.

Definitely not my idea

If you want to ‘float’ it on top of the other elements use the z-index

although this uses javascript, it has been reported to also have issues similar to custom CSS

Either way that works for you, go for it.

Working really clean now @boston85719. Thanks a million. A simple group has much less CSS and functionality than a group focus. Works great on mobile too.

captured

Just wondering how you solved when clicking outside dropdown. The expected behaviour is for the dropdown group layer to disappear.

I didn’t do that. What I did do was make it so that when the dropdown is optional there is either an empty choice at top or “NONE”. When I want the drop down to close if the user is going to click outside, I have them click on the dropdown icon or the element itself. For any dropdown that is not optional when they close it, automatically the helper text and alerts are shown.

drop

However, if you want the functionality to allow a user to click off anywhere on screen, then place a group element that spans the width and height of the page with no background type (transparent) make sure to place it so it sits below the custom dropdown but above other elements on page and have it only visible when the drop down choices are visible. Then have a workflow to hide it when it is clicked and hide the drop down choices as well.

Yep, thats exactly what I did. My form is opened in a full screen popup. When user clicks anywhere on the popup it hides the layer of the dropdown. i have also added a style to the popup “cursor:default” so that the mouse doesn’t show the hand continuously.

How did you do that?

I have first added a class to the popup,

Onpageload I load the CSS with the respective style added to the class “overlay-100”,

1 Like