DropDown Text Alignment

I am using version 8.1.5.
I would like to know how to center the text of this component, I tried this but I don’t see any change.
image

image

You’d have to use your browser’s Developer Tools to figure out which style class it is using and inject some CSS. You can get an idea of how this is done in Request Focus in Perspective Table Search Bar - #5 by Transistor.

Note that centering numeric values like that is going to look amateurish. Having them right-aligned would be best so that thousands, hundreds, tens and units line up.

Have a good read of some user interface design guides and look at professionally designed user interfaces on your computer and phone.

1 Like

I’ve also run into this issue on v8.1.12; textAlign on the style just doesn’t seem to do what you’d expect it to do. dropdownStyle does work on the dropdown elements though (at least in v8.1.12).

If you still want to center the actual selected value of your dropdown, CSS does seem to be the way to go; you can do it like Transistor suggested or you can use a custom theme. I’m using a custom theme, and this is what I had to add to my CSS file to get the dropdowns to center properly:

.ia_dropdown__search {
	flex: 0 1 auto !important;
	min-width: 0px !important;
}

.ia_dropdown__valueSingle {
	justify-content: center !important;
	min-width: 5px !important;
	flex: 1 1 auto !important;
}

The valueSingle part makes sure the actual value is centered (note that by default min-width is 45px; I reduce it here because for my application, some dropdowns are rather narrow), and the search part is to stop a search-related box shifting everything to the left if you have search enabled. Not sure what the search empty box is, but it pops up and shifts everything off-center if you don’t force it not to grow and to have 0 min width (see below).

Just setting style textAlign: center:
image

CSS changes:
image

Hope this helps!

2 Likes