Help regarding dashboards background

Dash Python
1

Hi guys, I am having issues with changing the background of the dashboard I have created.

image
image1779×815 55.9 KB

As you can see in the image above, the background only spreads across 70% of the screen, where as i want it at 100%.
Heres my code

external_stylesheets = [
    'https://codepen.io/themustafaomar/pen/jLMPKm.css']  # ['https://codepen.io/chriddyp/pen/dZVMbK']
app = dash.Dash(__name__, external_stylesheets=[
    dbc.themes.BOOTSTRAP])  # external_stylesheets)#external_stylesheets)#[dbc.themes.BOOTSTRAP])# external_stylesheets)
auth = dash_auth.BasicAuth(app, USERNAME_PASSWORD_PAIRS)
application = app.server
app.title = 'P.Dashboard'

colors = {
    'background': 'medium-green',
    'text': '#7FDBFF'
}

app.layout = html.Div([

    get_header(),

    get_navbar(),
    get_emptyrow(),
    #####################
    # Row 5 : Charts
    html.Div([  # External row
        html.Div([], className='col-2'),  # Blank 1 column

        html.Div([  # External 10-column

            html.H2(children='Performance Dashboard',
                    style={'color': corporate_colors['white'], }),
            get_emptyrow(),
            html.Div([  # Internal row - RECAPS
                html.Div([], className='col-1'),  # Empty column
            ],
                className='row',
                # style=recapdiv
            ),

            # Chart Column

            # Chart Column

            html.Div(
                [  # Internal row
                    #html.Div([], className='col-2'),  # Blank 1 column,
                    # Chart Column

                    html.Div([dcc.Graph(id='AvailabilityDonut')],className='col-4'),
                    html.Div([dcc.Graph(id='ReliabilityDonut')],className='col-4'),
                    html.Div([dcc.Graph(id='ProductionPlot')], className='col-4')], className= 'row'),
                    get_emptyrow(),

                    html.Div([dcc.Graph(id='One')], className='col-4'),
                    html.Div([dcc.Graph(id='Two')], className='col-4'),
                    html.Div([dcc.Graph(id = 'TemperatureScale-2')],className='col-4')],className= 'row'),

            get_emptyrow(),
            html.Div([  # Internal Row#2
                #html.Div([], className='col-2'),
                html.Div([dcc.Graph(id='Three')], className='col-4'),
                # Chart Column
                html.Div([dcc.Graph(id='Four')], className='col-4'),
                html.Div([dcc.Graph(id = 'TemperatureScale-1')],className='col-4'),
                get_emptyrow(),

                html.Div(id='intermediate-value', style={'display': 'none'}),
                html.Div([
                html.H2('Asset Dashboard', id='title', style={'color': corporate_colors['white'],
                                                                 'margin-top': '20px'}),
                get_emptyrow(),


                html.Div(
                [  # Internal row
                    #html.Div([], className='col-2'),  # Blank 1 column,
                    # Chart Column

                    html.Div([dcc.Graph(id='my-table',style={'margin-top': '100px'})],className='col-4'),
                    html.Div([dcc.Graph(id='bar-graph', style={'height': '325px'})],className='col-4')],className= 'row'),

                html.Div(
                [  # Internal row
                    #html.Div([], className='col-2'),  # Blank 1 column,
                    # Chart Column

                    html.Div([dcc.Graph(id='my-table2',style={'margin-top': '100px'})],className='col-4'),
                    html.Div([dcc.Graph(id='bar-graph2', style={'height': '325px'})],className='col-4')],className= 'row'),

                dcc.Interval(id='interval1', interval=60 * 1000, n_intervals=0),
                html.Div(id='intermediate-value1', style={'display': 'none'})



])
            ], className='row')
        ],
            className='col-8',
            style=externalgraph_colstyling),
        html.Div([], className='col-1'),
    ],
        className='row',
        style=externalgraph_rowstyling
    )
2

Hi,

Please take a look on this old post.

In a nutshell, you have to whether a- reset the default css that is adding a border or b- define the background color for the entire body.

Hope this helps! :slight_smile:

1 Like