Increase height and fontsize of dcc.Dropdown

[dash0r]

Hi,

I know there are already a few related threads and my current solution is coming from these threads. Still, with this solution there remains one annoying feature.

Basically, I want to increase the height and the fontsize of a dcc.Dropdown menu. My current minimal example is as follows:

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc


app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
    [
        dcc.Dropdown(
            placeholder="Select",
            options=["option1", "option2", "option3"],
            className="customDropdown"
            )
    ], style={
        "width": "50%",
        "position": "absolute",
        "left": "50%",
        "top": "50%",
        "transform": "translate(-50%, -50%)",
        }
)

app.run(debug=False)

with a css file that is located in the “./assets/” folder and looks like this:

.customDropdown {
  width: 100%;
  font-size: 40px;
}

.customDropdown .Select-control {
  height: 50px;
}

.customDropdown .Select-placeholder, .Select-value {
  line-height: 50px;
}

This gives me the following result:

And this is looking as I want it (except that the arrow on the right is not vertically centered). The fontsize and height of the dropdown are increased and the placeholder text is located (vertically) in the middle of the dropdown menu.

However, if I select an option from the dropdown, it looks like this:

The selected value is no longer vertically centered.

Does anyone know how I can achieve that the selected value is also vertically centered?

Your help is much appreciated.

Kind regards

[dash0r]

For future reference, this solution gave (more or less) what I was looking for. But styling should really be better documented I think, it is quite a pain.

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
    [
        dcc.Dropdown(
            placeholder="Select",
            options=["option1", "option2", "option3"],
            searchable=False,
            optionHeight=40,
            className="customDropdown"
            )
    ], style={
        "width": "50%",
        "position": "absolute",
        "left": "50%",
        "top": "50%",
        "transform": "translate(-50%, -50%)",
        }
)

app.run(debug=False)

with css file:

.customDropdown .Select-input {
  height: 60px;
}

.customDropdown .Select-placeholder, .Select-value-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
}

.customDropdown .Select-menu-outer {
  font-size: 30px;
}

Result: