Height of dropdown list in css

Hi,

How to adjust the height of the dropdown list in the external stylesheet css?
I only able to adjust the width but not height.

Appreciate if anyone can share the idea on it. Thanks.

Did you try to style your dcc.Dropdown with something like style={'height':200}?

Yes, in external stylesheet css.
I had add border for the dropdown list. Only the border’ is affected by the height but not the dropdown list.

image

.dropdown-list {
  border: 4px solid #98a5ad;
  background-color: #e6eaec;
  border-radius: 5px;
  height: 20px;

}

I also have a problem to know exact syntaxes of "style={“xx”} for any object/module.
That would be great if somebody can share a documentation about it :smiling_face:

You could try min-height in this case.

min-height: 20px no reflect in dropdown list :sob:

You have to search for the correct type name. Maybe dropdown-list is not the right one…

Hello @beginof,

It looks like you need to adjust the fontSize as in the image, the height of the area is proportional to the font.

Something like this might work.

.dropdown-list {
    height: 20px;
    font-size: 16px;
}