Slider height seems to be zero?

Dash Python
1

If I create a slider and follow it with text, the text overlaps the labels on the slider. Here’s a pretty minimal example:

app.layout = html.Div(children=[
                                html.H1(children='Hello Dash'),
                                html.Div(children=
                                         ' Dash: A web application framework for Python.'),
                                dcc.Slider(
                                           id='Pct Large Cap',
                                           min= 0,
                                           max= 100, 
                                           value=30,
                                           step=5,
                                           marks={x : x for x in range(0, 101, 10)},
                                           vertical = False),
                                html.Div(children = 'Pct Large Cap')],
                      )

The problem is even worse if I set vertical to True - the entire slider is collapsed on itself.
I can explicitly set the height of the div, but I would think that shouldn’t be necessary.
I get the same result in Firefox and Chrome

2 Likes
2

There is currently a workaround for this bug. As suggested here at https://github.com/plotly/dash-core-components/issues/127 you can use a fixed height div to wrap the RangeSlider component. The following tweak to your code works well for me

    app.layout = html.Div(children=[
                                html.H1(children='Hello Dash'),
                                html.Div(children=
                                         ' Dash: A web application framework for Python.'),
                                html.Div(dcc.Slider(
                                           id='Pct Large Cap',
                                           min= 0,
                                           max= 100,
                                           value=30,
                                           step=5,
                                           marks={x : x for x in range(0, 101, 10)},
                                           vertical = False),
                                    style={'height': '50px', 'width': '100%','display': 'inline-block'},
                                ),
                                html.Div(children = 'Pct Large Cap')],
                      )