How to remove small border around edge of app.layout

Dash Python
1

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)
2

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
3

Thank you very much! That did the trick.

2 Likes
4

according to : https://dash.plotly.com/external-resources

you can create assets/typography.css with below style:

body {
margin: 0;
}