Forum Academy Marketplace Showcase Pricing Features

CSS Tools to Center Align A Dropdown?

The dropdown text can’t be aligned center or right (waiting for years for this to be fixed).

Can the plugin CSS Tools do the job? If so, how? Thanks in advance.

2 Likes

Nobody’s ever written a styled dropdown plugin? (Which wouldn’t actually be a native select object but would be a custom dealy, it turns out.)

You can of course build a dropdown type selector in Bubble (without coding) and use that (which might not perform exactly like what you want, but you can at least make it look the way you want).

An explanation of available solutions to doing this with the native HTML select element is here (note: I’ve not tested what’s best in Bubble, but upon reading you will understand why Bubble hasn’t [and won’t] “fix” this):

@keith Thanks. Yes, I used the html “solution” with the …,
select{
text-align-last:center;
}

but it centers all of the dropdowns. Someone suggested that if you put the HTML element inside a group with the dropdown you want to be centered, that would work, but it doesn’t…still centers every dropdown.

Well you would want to target the individual select. Turn on HTML IDs and give the select (dropdown) you want to modify a unique ID and then use CSS selector to target just that element.

(If your target has ID “mydropdown”, #mydropdown in CSS refers to that specific dropdown.)

1 Like

Works perfectly thanks.

> <style> #mydropdown {
> text-align-last:center;
> }
> </style>
2 Likes

How do you “turn on HTML ID’s” @keith?

I’ve copied something over from another app but it’s broken i think, possibly because i don’t have the ID’s turned on so it doesn’t know what to adjust.

@JustinC Settings > General > Expose the option to add an ID attribute to HTML elements

1 Like

I tried to implement the same, and it works when I use Firefox. However, on Chrome the text is still not aligned. Does it work for you when you use Chrome?

Yes, at that time, it worked. I haven’t used it since then, so it’s possible it no longer works on an updated version of Chrome.

Hi, just wondering where do I enter this code to get this to work?