Padding in dropdowns?

Is there a way to add horizontal padding in dropdown inputs? Right now it appears as if the text in the dropdowns is just left aligned and there’s no way to add a few pixels of padding like in other inputs.

Now that you can add custom HTML IDs to elements, adding an ID of “dropdownpadded” (and adding CSS) #dropdownpadded {padding:0 30px!important;} to the dropdown element will do the trick:

4 Likes

Thanks @philip! Where can I find the HTML editor? I was able to add the ID attribute but can’t find the HTML for the element.

For anyone else reading, the first step will be to enable HTML IDs in the settings tab:

After this, how you add CSS is up to you. You can set the styles in the Settings → SEO & Metatags → Advanced settings, which I recommend if these are static styles and will be needed across all pages of your app

Alternatively you can place a HTML element onto your page somewhere and add code there

In my case, I did add the CSS to a HTML block on the page but that’s mostly because that app I was working on was setup up that way already.

2 Likes

So I used this technique to adjust he padding (worked, thanks!) but now the dropdown extends to the end of the screen, and a max-height:300px!important didn’t really help in that either.

Anyone know how to adjust it? I deleted all the code, even for the padding, but the dropdown keeps extending out of the ordinary compared with the normal situation.

Thanks!

This topic was automatically closed after 70 days. New replies are no longer allowed.