# dcc.Dropdown menu items text alignment

**URL:** <https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248>\
**Category:** Dash Python\
**Created:** [March 21, 2021, 12:46pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248 "2021-03-21T12:46:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![stef007](https://avatars.discourse-cdn.com/v4/letter/s/ed8c4c/32.png) [@stef007](https://community.plotly.com/u/stef007)\
**Post date:** [March 21, 2021, 12:46pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248/1 "2021-03-21T12:46:15Z")

</div>

Hi, I cannot find the right style property to right align the text in dcc.Dropdown menu items:

The selected item is justified to the right, however the items are not

```auto
dcc.Dropdown(
                        id='crossfilter-months',
                        options=[{'label': value, 'value': key} for key, value in month_key.items()],
                        value='03'
                    )], style={'textAlign': 'right', 'font-size': 10}, lang='he', dir='rtl'

```

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 21, 2021, 4:27pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248/2 "2021-03-21T16:27:28Z")

</div>

Hi @stef007

Currently, the only parameter available to style the dropdown options is `optionHeight`, However, you can further style the options by using a .css file in the assets folder. More info on that [here](https://dash.plotly.com/external-resources)

This will right align the options:

```auto
.VirtualizedSelectOption {    
    display: inline-block;
    text-align:right;
}

```

---

<div class="post-metadata">

**Author:** ![moniii18](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@moniii18](https://community.plotly.com/u/moniii18)\
**Post date:** [February 11, 2022, 1:38pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248/3 "2022-02-11T13:38:44Z")

</div>

Is `VirtualizedSelectionOption` discussed in the docs, or did you look at the source code?

---

<div class="post-metadata">

**Author:** ![Stephan.Katz](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@Stephan.Katz](https://community.plotly.com/u/Stephan.Katz)\
**Post date:** [February 11, 2022, 2:29pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248/4 "2022-02-11T14:29:41Z")

</div>

This should be addressed to @[AnnarieW](https://community.plotly.com/u/AnnMarieW)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 11, 2022, 3:23pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248/5 "2022-02-11T15:23:11Z")

</div>

Hi @Stephan.Katz, thanks for the tag - I missed @moniii18 's question.

No, this is not discussed in the docs. I discovered it by inspecting the page and finding the css that styles the dcc.Dropdown.

You can find a lot more about styling dash components at my [Dash Bootstrap Theme Explorer](https://hellodash.pythonanywhere.com/about_dbc_css). This page shows how to style components with a Bootstrap theme.

However, if you would like to style the components in a different way, you can start with the [`dbc.css` style sheet](https://github.com/AnnMarieW/dash-bootstrap-templates/blob/main/dbc.css) and customize it for your own needs.

You will find many handy selectors there, along with comments to describe what each one does:

For example, here are more selectors for the dropdown

```auto
* --------- dcc dropdown ---- */

/* input box */
.dbc .Select-control {
  background-color: var(--bs-body-bg) !important;
  border: solid rgba(100, 100, 100, 0.4) 1px !important;
}

/* changes the text color of input box */
.dbc .Select-value-label {
  color: var(--bs-body-color) !important;
}

.dbc .Select input {
  color: var(--bs-body-color);
}

/* dropdown menu options */
.dbc .VirtualizedSelectOption {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* dropdown menu hover effect */
.dbc .VirtualizedSelectFocusedOption {
  background-color: rgba(100, 100, 100, 0.2);
  color: black;
}

/* border on focus - default is blue
 * shadow box around input box. default is blue
 */
.dbc .is-focused:not(.is-open) > .Select-control {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

/* primary this colors the input box text and x of multi */
.dbc .Select--multi .Select-value {
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
}

```

---

<div class="post-metadata">

**Author:** ![Stephan.Katz](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@Stephan.Katz](https://community.plotly.com/u/Stephan.Katz)\
**Post date:** [February 11, 2022, 4:10pm UTC](https://community.plotly.com/t/dcc-dropdown-menu-items-text-alignment/51248/6 "2022-02-11T16:10:59Z")

</div>

wow, wow. I wish that I was exposed to that earlier on.  
Your references are invaluable.

THANK YOU