Apparently now dropdown and other native elements have the possibility to modify padding. But the dropdown arrow icon still with the same padding as always.
I have not seen the option to modify padding on the dropdown. Where is it?
You need to have your page under the new responsive editor, and just select your dropdown and go to “layout”
Yes, already mentioned in the announcement thread. Bubble says they’re considering an enhancement for a future release.
1 Like
Thanks for your reply, I thought this was a bug or something. I can’t believe this isn’t possible yet.
2 Likes
I’ve found a solution to this, although please note I am not a developer and there’s a high chance I’m breaking something!!
The chevron that Bubble is using is actually an image. If you jump into developer tools, you will see the below styling applied within the dropdown:
By default, this will make your dropdown look like this
To edit, add the HTML element onto the page in Bubble, then use the tags to edit the CSS. I edited the following:
background-image - You can link your own dropdown chervon icon. I uploaded an SVG of the chevron icon into my Bubble file manager and used this URL instead of the default one
background-position - I changed this to “right 0.625em”, to give it some extra right padding
background-size - I made mine 1.5em, instead of the default 1em
Below shows the code in my HTML editor:
After editing, my dropdown now looks like this:
Reminder: I am NOT a developer and just played around to try and fix this for myself. Edit at your own risk!
3 Likes