Dropdown display with dbc style sheet

Dash Python
1

Hi dash community,

I have a problem with dropdown display when using the external_stylehssets = [dbc.themes,BOOTSTRAP] in my app.
Setting the className of the dropdown equal to ‘row’ won’t let the dropdown take the entire ‘row’.
I am curious how to adjust dropdown column width with dbc stylesheet?

Below is my code for reference:

import plotly.plotly as py
import plotly.graph_objs as go

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

#Figure
trace1 = go.Bar(
    x=['giraffes', 'orangutans', 'monkeys'],
    y=[20, 14, 23],
    name='SF Zoo'
)
trace2 = go.Bar(
    x=['giraffes', 'orangutans', 'monkeys'],
    y=[12, 18, 29],
    name='LA Zoo'
)

data = [trace1, trace2]
layout = go.Layout(
    barmode='group'
)

fig = go.Figure(data=data, layout=layout)

#App layout
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config['suppress_callback_exceptions']=True

tabs_div = html.Div([
    dcc.Tabs(
        id = 'ab_tabs',
        children = [
            dcc.Tab(
                label = 'a',
                value = 'a',
                ),
            dcc.Tab(
                label = 'b',
                value = 'b',
                ),
    ],
        value = 'a'
    ),
    html.Div(
        id = 'tabs_content',
        style = {'margin':'2% 3%', 'marginLeft':50}
    )
])
    
    
    
progress = html.Div(
    [
        dbc.Progress(id="progress", value=0, striped=True, animated=True),
        dcc.Interval(id="interval", interval=250, n_intervals=0),
    ]
)
bar_graph = dcc.Graph(figure=fig)
drop_div = html.Div([
    html.A('This is a dropdown'),
    dcc.Dropdown(
        id = 'd_d',
        options=[{'label':'abc', 'value':'abc'},
                 {'label':'bcd', 'value':'bcd'}
                 ],
        value='abc'
    ),
    ],
#className = 'row'
),




@app.callback(Output("progress", "value"), [Input("interval", "n_intervals")])
def advance_progress(n):
    return min(n % 110, 100)

@app.callback(Output('tabs_content', 'children'),
             [Input('ab_tabs', 'value')])
def update_tabs(tab):
    if tab =='a':
        return html.Div([bar_graph, progress])
    if tab =='b':
        return drop_div

app.layout = html.Div([tabs_div])

if __name__ == "__main__":
    app.run_server(port='9030')
2

i think i just solved my problem by looking up bootstrap styling

It’s a bit different from ‘row’ ‘columns’ className styling i use quite often in dcc.
guess i will need to change all the className style code in my app if i want to incorporate some bootstrap components in my app.

3

Hey @almond

Do you know about the Row and Col components in dash-bootstrap-components? They give you quite a lot of control over the layout of your app, and save you from having to specify className manually all the time. Check out the docs here.

3 Likes