Hello Forum,
I am quite new to Dash and I have been experimenting with a started dashboard. I tried to insert a dropdown and a slider within the same Div that is split into two columns as shown below. The idea is to have the slider on the left and the drop down on the right.
html.Div([
html.Label('Additional Samples'),
dcc.Slider(
id="test-slider",
min=0,
max=15,
marks={i: f'{i}' for i in range(16)},
value=0
),
html.Label('Column Select'),
dcc.Dropdown(
id="test-dropdown",
options=[
{'label': i, 'value': i} for i in test_cols
]),
], style={'columnCount': 2}),
Which looks as expected when the drop-down isn’t selected as shown below:
However when I click on the dropdown to make a selection, the div overflows to the left cause the label and part of the dropdown to split left looking very strange as shown below.
Is there a way to fix this behavior? I am aware this is probably a css thing but not sure. I am using the basic css file from the dash tutorials.
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
Thank you so much for this.
stratoshad135
I don’t have much experience with columnCount, but it appears Dash is wrapping one column into two via this command; thus when selecting the dropdown, it moves some to the other column. It is interesting to note that after the dropdown is selected, the height of each column is the same.
However, I tweaked your code (using className vice columnCount to get the desired effect.
import dash
import dash_html_components as html
import dash_core_components as dcc
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
children=[
html.Div([
html.Label('Additional Samples'),
dcc.Slider(
id="test-slider",
min=0,
max=15,
marks={i: f'{i}' for i in range(16)},
value=0
),
],
className='six columns',
),
html.Div([
html.Label('Column Select'),
dcc.Dropdown(
id="test-dropdown",
options=[
{'label': 'Column {}'.format(i), 'value': i} for i in range(3)
]),
],
className='six columns',
)
]
)
if __name__ == '__main__':
app.run_server(debug=True)
Thank you so much that gave me 99% of the solution. The only issue was that using that class, we get a 48% width on each element. However if you have any padding / margin on your body or overall document (I have 2rem padding on the entire page) it doesn’t get considered so 48% + 48% + padding ends up being > 100% so the two elements are displayed in different lines.
The solution to that is to add a “style” tag under the className, reducing the width to fit your needs, for me 42% did the trick. You just play with it in the browser inspect element editor until you get the right percentage. As shown below :
html.Div([
html.Label('Additional Samples'),
dcc.Slider(
id="test-slider-1",
min=0,
max=15,
marks={i: f'{i}' for i in range(16)},
value=0
),
],
className="six columns",
style={'width': "42%", 'margin-bottom': '4rem'},
),
Thank you again for this, you saved the day!
