# Increase height and fontsize of dcc.Dropdown

**URL:** <https://community.plotly.com/t/increase-height-and-fontsize-of-dcc-dropdown/86252>\
**Category:** Dash Python\
**Created:** [August 1, 2024, 10:44am UTC](https://community.plotly.com/t/increase-height-and-fontsize-of-dcc-dropdown/86252 "2024-08-01T10:44:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dash0r](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@dash0r](https://community.plotly.com/u/dash0r)\
**Post date:** [August 1, 2024, 10:44am UTC](https://community.plotly.com/t/increase-height-and-fontsize-of-dcc-dropdown/86252/1 "2024-08-01T10:44:54Z")

</div>

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:

```auto
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:

```auto
.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:  
 ![dropdown_before](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/9/392027715800fe241b884468f379865d5c78bb65.png)

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:  
 ![dropdown_after](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/5/755f1d505f16996933ca54dc274bb727eea6d6d2.png)

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

---

<div class="post-metadata">

**Author:** ![dash0r](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@dash0r](https://community.plotly.com/u/dash0r)\
**Post date:** [August 7, 2024, 8:31am UTC](https://community.plotly.com/t/increase-height-and-fontsize-of-dcc-dropdown/86252/2 "2024-08-07T08:31:02Z")

</div>

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.

```auto
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:

```auto
.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:

 ![screenshot1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/6/a625da42505a44cc6eeed0f425ac0132acea7f39.jpeg)  
 ![screenshot2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/1/718a420b7803061a8c802a1f2ef449e203e2f173.jpeg)