# Dropdown display with dbc style sheet

**URL:** <https://community.plotly.com/t/dropdown-display-with-dbc-style-sheet/21074>\
**Category:** Dash Python\
**Created:** [March 19, 2019, 8:20am UTC](https://community.plotly.com/t/dropdown-display-with-dbc-style-sheet/21074 "2019-03-19T08:20:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![almond](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@almond](https://community.plotly.com/u/almond)\
**Post date:** [March 19, 2019, 8:20am UTC](https://community.plotly.com/t/dropdown-display-with-dbc-style-sheet/21074/1 "2019-03-19T08:20:53Z")

</div>

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')
```

---

<div class="post-metadata">

**Author:** ![almond](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@almond](https://community.plotly.com/u/almond)\
**Post date:** [March 19, 2019, 8:39am UTC](https://community.plotly.com/t/dropdown-display-with-dbc-style-sheet/21074/2 "2019-03-19T08:39:50Z")

</div>

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

> **[Sizing](https://getbootstrap.com/docs/4.0/utilities/sizing/)**
>
> Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.

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.

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [March 19, 2019, 10:43am UTC](https://community.plotly.com/t/dropdown-display-with-dbc-style-sheet/21074/3 "2019-03-19T10:43:29Z")

</div>

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](https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout).