Hey Peeps. Sorry for the Noob question. How do I get rid of the Gradient on Dropdown element? The standard dropdown is ugly and looks like something from 1999. I can’t believe that a modern app like Bubble doesn’t give you the ability to get rid of that gradient. The Bubble editor itself has much more modern dropdown style. Why don’t they give us that style as an option??!
Any advise would be appreciated!
@fred.illies click edit style and change the background from gradient to flat color
Thanks @alex.esposito.1108 I tried that, and switched to flat color, but it had no effect on the drop down. I can add a colour to it, but the gradient is always there. I tried to add the Twitter theme to the drop down, and that also had zero effect. I suspect that the answer lies in Themes, but the documentation around themes has not been much help.
@fred4 I haven’t played around with themes so I can’t speak to that. But for sure you can remove the gradient. Maybe the style you’re using has a condition with a gradient that’s overriding the original settings? It would be helpful if you posted screenshots of the element, element properties, and style settings.
Thanks @alex.esposito.1108 . I attach an image depicting the issue, and the style settings for the Standard Dropdown.
@fred.illies ahh ok. This is actually related to the browser you’re using. Each browsers has it’s own quirks and displays things slightly differently. If you use Chrome there won’t be any gradient. You could make your own dropdown and turn it into a reusable element to use throughout your app but I’m not sure if it’s worth the effort.
@alex.esposito.1108 Thanks! I was pulling my hair out trying to figure out why that was happening. I’ll definitely create my own reusable custom drop-down.
I personally wouldn’t recommend that based on my past experience doing so.
If you are going to only use a single dropdown in your app, it may be fine to make a reusable element for the desire to format it to look the way you want regardless of the browser being use. However, some major drawbacks will be your ‘custom dropdown’ will not be a dropdown and therefore wouldn’t be able to be accessed via tab button.
Also, if you intend to use a dropdown in several areas of your app (I use them in every form…so pretty much used extensively through all apps), you wouldn’t be able to reuse the reusable element since you will need to set up different data sources to display the selection choices. Also, on a mobile device the users device will not recognize it as a dropdown element and will not behave the way you would want it to on a mobile device.
My personal recommendation if you are dead set on overriding the browser default CSS settings for dropdown elements is to investigate the custom css you could apply to your app to ensure the dropdown looks the same across all browsers. Unfortunately I do not have experience doing that, and also not 100% sure it can be done, but ultimately, I most definitely wouldn’t create a reusable element.
@boston85719 Thanks for the advise. I’ll look into the custom CSS option, but may have to just accept that Safari adds that unwanted gradient…
This topic was automatically closed after 70 days. New replies are no longer allowed.
