[Breaking Change] Dropdown browser compatibility

[kathleen]

Hi everyone,

We’re about to introduce a breaking change that makes dropdowns cross-browser compatible. Since we use the browser’s native dropdown HTML component, dropdowns have very limited styling options and vary between browsers. However, we are now adding padding to dropdowns and replacing the browser’s styles with our own dropdown arrow as a background image (this also means that any background image you add to the element will override our default style). As a result, dropdowns will look consistent across browsers and they will respect the appearance settings you set in the Property Editor. This is hopefully an exciting change for most of you, but we are releasing as a new bubble version out of an abundance of caution.

Please let us know if you have any questions!

[petter]

I think I speak for everyone when I say this is a very welcome update

Thanks team Bubble!

[renatoasse]

Nice! No more adding dropdowns inside groups to simulate padding

Thanks @kathleen !

[jameore]

[johnny]

YAYYYYY! Finally!

[J805]

Already pushed the update, looks so much better! Thanks again, was waiting for this one.

[matt15]

[mszaxaroff]

Cool! Thanks, this solves a lot of problems! Maybe in the next update you will add #hashtags and @tags? There are no well working solutions. I want to create a twitter feed with hashtags added, I have to use search and replace and sometimes it still doesn’t work.

[rlslimited]

@kathleen good to hear these neglected little things are finally being looked into and getting much needed updates.

Does this update include the ability to style the container that holds the dropdown values? Sizing, background color etc… I understand this could be achieved using other methods but if you are working on updating the UI controls of these elements it would make sense to give us control of all aspects of the element, while you are on a roll!

[Sarah_Esteve]

no more simulated padding with border and outset for border @jameore

[Sarah_Esteve]

+1 for this. Default is uggly

[jameore]

@Sarah_Esteve they are making it too easy for us

[rico.trevisan]

Loving this first step. Could you make the placeholder color dynamic?

[mike_verbruggen]

@kathleen thanks for this update. I tried to upload my own arrow(image) in the background of the dropdown but was unable to position the background the way I liked it because there are two default CSS settings in my way.

Can you give us the ability to edit the background-position and background-size otherwise we are unable to position the background image in a proper way?

[sudsy]

@Sarah_Esteve

no more simulated padding with border and outset for border

Unfortunately, that’s the only way I am able to get spacing between the chevron and right edge which looks balanced to my eye (at least without using CSS or a replacement background image with spacing built in). What am I missing?

Would be cool if the distance between the background image and right edge was “linked” to the right padding.

[kathleen]

Thanks for all the great feedback everyone! We truly appreciate it, and have taken note of these requests for future consideration.

[kathleen]

As per my above comment, we’ve logged this as a feature request You are correct that the right padding does not shift the background image — currently, this is intentional behavior but something we are looking into for the future.

[nikifrancesca]

Excellent!

[tararbese23]

Great !!!

[greg18]

Thanks @kathleen this is a good improvement. But if I understand correctly, all that is improved is the appearance of the un-opened dropdown – once the dropdown is clicked, it still opens the browser’s native dropdown.

Some browsers unfortunately do not support a native dropdown, such as the Tesla in-vehicle web browser. No Bubble dropdowns work in those browsers.

Perhaps Tesla should upgrade its browser to support native dropdowns (I suppose Tesla is not known for their web browser). But in the meantime, could Bubble please build a dropdown element that does not rely on the native browser?