Vertical align Placeholder text inside dcc.Dropdown

Hi all,

I have inserted a dcc.Dropdown, and increased its height to fit my intended layout.

However, with the height increased, the placeholder text still remains near the top of the dcc.Dropdown.

I have tried styling with verticalAlign and padding, but to no avail. Anyone has any idea how to get the placeholder text to be center and middle?

Did you figure this out? Having the same problem.

Nope, in the end I went to learn Python Flask to restructure the site I wanted to create

I figured it out, I’ll post it for anyone who comes across it in the future. I used the inspect feature on my browser (chrome) and readjusted the individual ‘div’ classes associated with dropdown menu in my custom css file

.Select-placeholder, .Select-arrow-zone, .Select-input, .Select-value-label, .Select-clear-zone {
line-height: dropdown_height;
}

1 Like