dcc.Dropdown menu items text alignment

Dash Python
1

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

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'
2

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

This will right align the options:

.VirtualizedSelectOption {    
    display: inline-block;
    text-align:right;
}
2 Likes
3

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

4

This should be addressed to @AnnarieW

5

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. 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 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

* --------- 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;
}
6 Likes
6

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

THANK YOU

1 Like