Material UI Select component's customized icon do not vertically center

user_8850211 0
Viewed 181

Here is the demo link, right now, the dropdown icon is not vertically center. It seems like it has additional top padding for the icon with class "tlm-dropdown-icon". That extra space cause the icon is not vertical center. I inspect the element, but I do not find out any related padding or margin for the element. Besides, I actually do not understand why the icon have extra space on the top.

top: 50%;
transform: translateY(-50%);

these CSSseems not doing any work.
Thanks for the help!

material-ui reactjs css
1 Answers

You set the extrinsic height of the icon element to a small number, causing it to be overflowed and pushed down (at least that's my assumption). The fix is remove the height or set it to auto in your custom icon styles so the element can be able to resize itself:

height: auto;
top: 50%;
transform: translateY(-50%);

You can also use flex and vertically align it:

height: 100%;
display: flex;
align-items: center;
user_94494260
Related