Dashboard x-axis slider clipped

[eddy_oj]

Hi all,

I am learning Dash and I have followed one of the tutorials:

https://plot.ly/dash/getting-started-part-2

However, the date slider is clipped on my browser (see earliest year on screenrgrab). No html has been edited and the browser zoom does not make a difference. Anyone know what I may be doing incorrect?

My Dash versions:

plotly 2.2.2
dash 0.20.0
dash-core-components 0.18.1
dash-html-components 0.8.0
dash-renderer 0.11.2
dash.ly 0.17.3

[eddy_oj]

I have trialed a few of the other sample dashboards and have found it is the x-axis range slider that is causing the issue of clipping.

This is also causing the problem in my other post (Resizing Dash to fit a parent container)

So now my question is:

Is there a way to resize the x-axis range slider?

In addition, when inspecting the elements, it seems to be appended to the bottom of the html document, ignoring the bounds of the html doc (see attached image). How do I get Dash to respect the bounds or will this require some redevelopment of the tool?

P.S great app , I am quite excited about Dash.

[nedned]

I think the issue is the labels of the slider stretching past the bounds of the window. Deleting the element that contains the marks (has the class name rc-slider-mark) the scrollbar disappears. You just need to constrain the width of the slider so it’s not 100%, otherwise the labels will overflow the bounding div. Applying the style width:95% to either the entire layout div or to a div that just wraps the slider should fix the issue.