Use option groups for dropdowns?

[mangooly]

Hello,

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

<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

[boston85719]

Check this thread

[New Feature] Option sets

Hello everyone! We’ve just released a new feature: Option sets. Option sets allow you to have a static list of choices or Options which are global to your app. This is great for situations where you know ahead of time what options are possible for a variable - things like days of the week, marital status, team name for a given user, etc. You can create them in the Data tab, add various options to them, and even add attributes to your options. You can use option sets anywhere you would use a nor…

it may help

Or search the forum for custom drop downs

[mangooly]

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.

[eli]

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.

[boston85719]

is building something custom

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.

[mangooly]

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

Thanks

[mangooly]

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.

[lantzgould]

@mangooly I just implemented this on mine.

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

Set this group to:

Then when a use selects an option:

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

---

Here’s your default if want:

And we set the value if it’s empty:

[mangooly]

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.

[mangooly]

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.

[boston85719]

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.

[mangooly]

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.

[boston85719]

Have you tried it on an actual Iphone

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.

[mangooly]

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.

[boston85719]

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

Definitely not my idea

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

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

Walkthrough Tour

This is how you can create the effects needed for a more visually appealing walkthrough tour You can use a bit of HTML and Javascript to build your own tour First thing is to “blackout/greyout/blur” your page…to do so you will need a group element that covers your page…you can set whatever color you want; how about a “redout” [15%20AM] Then in workflows you should have a button that you use to show it, which would be the start of the tour. To get a blur effect, you will need an html element…

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.

[mangooly]

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.

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

[boston85719]

Just wondering how you solved when clicking outside dropdown

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.

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.

[mangooly]

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.

[boston85719]

i have also added a style to the popup “cursor:default”

How did you do that?

[mangooly]

I have first added a class to the popup,

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