Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Margins Cut Off on Dash App - Tutorial

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.

Thanks for your help!

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