Styling dcc.Dropdown in Plotly Dash
Plotly Dash is a powerful open-source framework for building interactive web-based data visualization applications. With Plotly Dash, you can easily create dynamic and visually appealing dashboards, reports, and data analysis tools. One of the key components of Plotly Dash is dcc.Dropdown.
Now, before we get started, let me clear one thing up. We may not be creating the above dashboard from scratch, but that doesn’t mean we’re not making a difference. In this post, we’ll be focusing on just one part of it: the dropdown. But don’t worry, we’ll be tackling the whole dashboard in a future post. So sit back, relax, and let’s get stylin’!
What is Dropdown in Plotly Dash?
dcc.Dropdown is a component in Plotly Dash that allows users to select single or multiple values from a dropdown menu. It is one of the most flexible and customizable components in Plotly Dash and can be used in a variety of ways. But despite its versatility, sometimes it can be a bit finicky to style. For example, changing the colour of the dropdown arrow, or adjusting the height of the options. But with a little CSS magic and some trial and error, you can make it look exactly how you want it to. So next time you work with this component, don’t be afraid to experiment and get creative! After all, with dcc.Dropdown, the possibilities are endless.
Basic Properties and Features of dcc.Dropdown
Here are some of the key properties and features of dcc.Dropdown:
options: This property is used to specify the options list for the dropdown menu. The options list can be a list of dictionaries or strings.value: This property is used to specify the initial value or values of the dropdown.multi: This property is used to specify whether the dropdown allows multiple selections. Ifmultiis set toTrue, the dropdown will allow multiple selections, and thevalueproperty will be a list of values. Ifmultiis set toFalse, the dropdown will only allow a single selection, and thevalueproperty will be a single value.style: This property is used to specify the CSS styles for the dropdown. You can usestyleit to customize the look and feel of the dropdown, including its size, colour, and font.
Events and Callbacks
dcc.Dropdown also has several events and callbacks that can be used to perform actions based on user interactions with the dropdown. For example, you can use the options property to update the options list of the dropdown based on user interactions with other components. You can also use the value property to update the dropdown value based on user interactions with other components.
Styling DropDown
So buckle up, folks, because in this blog we’re going to put aside the boring old events and callbacks, and dive headfirst into the wild and exciting world of styling Dropdown! Whether you want to change the colour of the arrow or adjust the height of the options, we’ll show you how to make this component look fabulous with just a dash of CSS.
First things first, we need to import all the essential bits and pieces, and then fire up our Plotly Dash app like a rocket. Get ready for some serious coding action, because we’re about to unleash the full styling of dcc.Dropdown.
#dash version - 2.8.1
from dash import html, dcc, Input, Output, State
import dash_bootstrap_components as dbc
from jupyter_dash import JupyterDash
app = JupyterDash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{"name": "viewport",
"content": "width=device-width, initial-scale=1"}
]
)So we are creating a beautifully styled html.Div with a stunning turquoise background colour and a height of 300 pixels. It’s surrounded by a margin of 20 pixels and filled with 20 pixels of padding, like a fancy turquoise gift box. Inside the gift box, we have two custom dropdown styles, ‘custom-dropdown-style-1’ and ‘custom-dropdown-style-2’. Both are using the powerful Plotly Dash component ‘dcc.Dropdown’ to present a menu of options for the user to choose from. With class names ‘dropdown-class-1’ and ‘dropdown-class-2’, these dropdowns are ready to be uniquely styled to match their specific turquoise gift box.
app.layout = html.Div([
html.Div(className='custom-dropdown-style-1', children=[
dcc.Dropdown(
options=[
{'label': 'Option 1', 'value': 1},
{'label': 'Option 2', 'value': 2},
{'label': 'Option 3', 'value': 3}
],
value=1,
className='dropdown-class-1',
)
], style={'margin-bottom':'40px'),
html.Div(className='custom-dropdown-style-2', children=[
dcc.Dropdown(
options=[
{'label': 'Option 4', 'value': 4},
{'label': 'Option 5', 'value': 5},
{'label': 'Option 6', 'value': 6}
],
value=4,
className='dropdown-class-2'
)
])
], style={'background-color':'#30E3DF', 'height':'300px',
'margin':'20px', 'padding':'20px'})
app.run_server(mode='inline')
The code you provided is a Python code in Plotly Dash. Plotly Dash uses the Plotly.js library to generate the HTML, JavaScript, and CSS code that is required to render the user interface in a web browser. When you run the above code, Plotly Dash will generate the following HTML code for the first dropdown.
<div class="custom-dropdown-style-1" style="margin-bottom: 40px;">
<div class="dash-dropdown">
<div class="Select dropdown-class-1 has-value is-clearable is-searchable Select--single">
<div class="Select-control">
<div class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-value">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">Option 1
</span>
</div>
<div class="Select-input" style="display: inline-block;">
//some text
</div>
</div>
<span aria-label="Clear value" class="Select-clear-zone" title="Clear value">
<span class="Select-clear">×</span>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
</div>
</div>
</div>The HTML code we got here shows the structure of the first dcc.Dropdown component in Plotly Dash. It’s wrapped inside a parent div with class name “custom-dropdown-style-1” and the dropdown itself is in a child div with class name “dash-dropdown”. The dropdown is built using the Select component from the React Select library. The Select component has several class names that determine its state, such as “has-value” and “is-clearable”, and it also has a number of child elements that make up the dropdown, including the Select-control, Select-multi-value-wrapper, Select-value, Select-input, Select-clear-zone, Select-clear, Select-arrow-zone, and Select-arrow.
By customizing the child elements within this component, we can achieve the desired styling. This is why it is important to have a thorough understanding of its inner workings.
Let’s spice up this bland life by adding some colour to it
style={'background-color':'#FCE22A'}Adding this style to both dropdown.
Let’s stretch our dropdown to make it the star of the show by giving it a width of 90% of its parent div and margin auto. That way, it’ll be the center of attention on any screen size!
style={'background-color':'#FCE22A', 'width':'90%', 'margin':'0 auto'}
Let’s see HTML Code.
Style is applied consistently to both dash-dropdown and Select-control. With the width set to 90% of the parent, the “select-control” is making sure to inherit its parent’s width, which is “selected”. And “selected” is the child of none other than the “dash-dropdown”! So that’s why you see the border.
.dropdown-class-2 > .Select-control {
width:100% !important;
border: 2px solid black;
border-radius:20px;
}
Whoops, it looks like we’ve got a bit of a CSS mix-up here! Specifying the background colour in the dash code is great and all, but it seems to have caused an uneven background colour. No problem, we can just delete background-colour in style in the dash and specify the colour under the “select-control”. That way, we’ll be able to achieve a more consistent look and avoid any future CSS confusion.
.dropdown-class-2 > .Select-control {
width:100% !important;
border: 2px solid black;
border-radius:20px;
background-color:#FCE22A;
}
The height of the dropdown is definitely an important aspect to consider when it comes to designing a dashboard. Thin and slim dropdowns are often more visually appealing and can help to create a clean and organized look. Changing the height should be a quick and easy fix, Hope SO….
style={'background-color':'#FCE22A', 'width':'90%', 'margin':'0 auto',
'height':'15px'}
Well, well, well, it seems we have a bit of a height conundrum! If you thought that simply specifying the height in the style would solve all your problems, I’ve got some news for you. There may be other ways to tackle this, but the method I have in mind is just one more creative solution to add to the mix. Let’s see if we can make those dropdowns small and proud!
.dropdown-class-3 > .Select-control {
width:100% !important;
border: 2px solid black;
border-radius:20px;
background-color:#FCE22A;
display:flex //Adding display flex here
}
Ah, the age-old problem of flex children now! It sounds like all the children's elements have become flex, causing some misalignment issues. But don’t worry, we can easily fix this by specifying the size. That way, everything will be perfectly aligned and look great on your dashboard.
.dropdown-class-2 {
flex-grow:1
}
.dropdown-class-2 >.Select-control .Select-multi-value-wrapper {
flex-grow:2;
text-align:center;
}
.dropdown-class-2 >.Select-control .Select-value, .Select-placeholder
{
line-height: 11px; //this you have to adjust according to heigt you set
}
.dropdown-class-2.Select span{
color:red;
font-size:1em;
}
And that’s a wrap folk! After all our hard work, we’ve finally got a slim and trim dropdown that’s ready for its close-up. I hope that styling this little minx will not take too much of your time in future. There’s always room for more styling, like adding hover effects, changing colours when selecting, styling the dropdown values, and so much more. But that’s a story for another day. Thanks for reading! If this piece of writing has helped you in any way, please don’t forget to show some love with a clap or two. A single clap is always a great source of motivation!
