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.
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.
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.
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.
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.
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.