30 Boosts shipped! July 2024 Boost Days Recap

[daviddr17]

I think its possible with a little css

[randomanon]

Anything is possible with HTML/CSS/JS. It’s an ideal “boost.” Very low-hanging fruit.

[daviddr17]

Thats true, just wanted to say that its just 3 lines of code for an entire app. But of course could be easier with a “padding option”.

[randomanon]

What are the 3 lines of code?

[boston85719]

Dropdown Icon Position

If you want to change the position of the Icon in the dropdown you can use the code below <style> #drop-custom { background-position: right 4px top 50%, 0 0 !important; } </style> The dropdown element to target will need the HTML ID attribute set, and in the code above that is drop-custom The 4px in the code above makes the icon 4px away from the right side of the dropdown. You can put this code into an HTML element onto the page

Dropdown - Font Position - Centered

If you want to change the position of the font in the dropdown you can use the code below <style> #drop-custom { text-align-last: center !important; } </style> The dropdown element to target will need the HTML ID attribute set, and in the code above that is drop-custom The text in the dropdown will be centered aligned according to the size of the dropdown element. You can put this code into an HTML element onto the page Below is quick example of a dropdown with no icon and centered text a…

Dropdown Icon - Don't Show

If you want the icon in the dropdown element to not be visible you can use the code below <style> #drop-custom { background-size: 0px !important; } </style> The dropdown element to target will need the HTML ID attribute set. In the code above that ID is drop-custom You can put this code into an HTML element onto the page This will make it so the icon is not visible to the user

[randomanon]

Thanks @boston85719. Can I use one HTML ID shared between all dropdowns and apply it to all of them using only one HTML element?

[boston85719]

I guess. Give it a test

[autom8]

@randomanon

Thanks @boston85719. Can I use one HTML ID shared between all dropdowns and apply it to all of them using only one HTML element?

@randomanon you can do this using the free Classify plugin.

@boston85719 has given a great written tutorial, and you can also watch a video tutorial here https://youtu.be/XZeME4z9byM?si=7-2Os7m4tZtEWAAK

[randomanon]

Thanks, might end up changing the chevron to a bigger one too.

For the ID attribute, it’s actually working just fine by naming them all the same ID attribute, not sure if this is bad practice or anything but I usually prefer to use native over plugins.

[bonjour_17]

Hi Bubble,

Next time you plan a “boosts day” sprint, please add something so that my Log settings are stored and I don’t have to set them manually each - single - every - time