Margins Cut Off on Dash App - Tutorial

Dash Python
1

Hi all,

I’m working through the Dash User Guide, and finding that the examples with the sliders start to cut off. Would there be any options to change this part so that it’s not cut off at the extreme ends?

Here’s an image of what I mean (code is copy pasted from the exercise). I’ve tried changing browsers, zoom levels, etc. and no matter what, it resizes the window so I always have to scroll over to see the extremes. Left side never shows the 1 in 1952. For reference, the screenshot is in Chrome on a Mac.

11%20PM
Screen Shot 2018-12-11 at 2.43.11 PM.png1252×554 80.6 KB

Thanks for your help!

2

Looks like this is fixed in a later lesson by giving the html.Div that holds the slider a style argument called “padding”.

Example:

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].min(),
        marks={str(year): str(year) for year in df['year'].unique()}
    )
], style={'padding': '0px 20px 20px 20px'})  # Added in style padding to ignore the cutoffs