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

How to remove small border around edge of app.layout

I’m working on the UI for my application running on plotly dash. When I set the background color there is a small border area between the window and the layout that doesn’t get colored. How do I remove this? Or is there a way to have the color go all the way to the edge of the window?

Capture

I whittled the page to the basics…
import os
from flask import Flask
import dash
import dash_html_components as html

app=dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})

server = Flask(__name__)
server.secret_key = os.environ.get('secret_key', 'secret')

app.layout = html.Div(
    [
        html.Div(
            [html.H1('Dashboard',className='six columns')],
            className='row',
        ),
    ],
    className='twelve columns',
    style={'background-color':'gray'}
)

if __name__ == '__main__':
    app.server.run(debug=True, threaded=True)

This is a result of the browser supplying a user agent style sheet with the <body> element having a default margin of 8px. You can override that if you want by attaching your own CSS style sheet with the following style:

body {
    margin-left: 0;
    margin-right: 0;
}

or if you want to get rid of all margins:

body {
    margin: 0;
}
4 Likes

Thank you very much! That did the trick.

2 Likes