Multipage app remove gaps on left and right side

[guy13]

For a multipage app, how does one remove the gaps on the left and right side of the page so that headers or other object fill the entire screen width.

Sorry I am new to dash and this forum so if this has been answered elsewhere I apologize. Below is a snippet of my app.py , home.py, and the css sheets its using.

app.py

import dash
from dash import Dash, html, dcc

app = Dash(__name__,use_pages=True)

app.layout = html.Div(children = [
    html.Div(className='top_level_bar_container', children=[
        html.H5(
            "Top Page",
        className = 'top_level_bar_text',)],
    ),
	# html.H4('Links below to each subtopic:'),
    html.Div(id = "SplashPageLinks",children = [
            dcc.Link("HOME",href = "/",className = 'link_font_color',)
        ],
        className = 'link_container',
    ),
	dash.page_container,
    
    #Create store to save data across pages
    dcc.Store(id = "DataStore",data = {}),
    
    html.Div(children=[
                html.H5(children="Bottom Page",
                        className='bottom_level_bar_text',
                )],
            className = 'bottom_level_bar_container',
            ),
    ],
)

if __name__ == '__main__':
    ## Initializes and run in debug mode
    app.run_server(debug=True,port=8050)
    app.config['suppress_callback_exceptions'] = True

home.py

import dash
from dash import html, dcc, Input, Output, callback, get_asset_url
from dash.exceptions import PreventUpdate
import pandas as pd

dash.register_page(__name__, path='/')

layout = html.Div(children=[
    html.Div(children=[
        html.Div(children = [
            html.Caption(id = "Drop1_Caption",children = "Choose Option:"),
            dcc.Dropdown(id='Drop1',
                    options= [{"label": "label" , "value":"label"}],
                    ) #End of drop
                ], #End of Div Children
            className = 'drop_3_grid_item',
        ), #End of Div
        html.Div(children = [
            html.Caption(id = "Drop2_Caption",children = "Choose Option:"),
            dcc.Dropdown(id='Drop2',
                    disabled = True,
                    ) #End of drop
                ], #End of Div Children
            className = 'drop_3_grid_item',
        ), #End Of Div
        html.Div(children = [
            html.Caption(id = "Drop3_Caption",children = "Choose Final Option:"),
            dcc.Dropdown(id='Drop3',
                    multi = True, 
                    disabled = True,
                ) #End of drop
            ], #End of Div Children
            className = 'drop_3_grid_item',
        ), #End of Div
    ], #End of div Children
        className = 'drop_3_grid_container',
    ), #End of dropdown div container
])#End of layout

css

.top_level_bar_container {
  position: sticky;
  top: 0;
  height: 15px;
  background-color: #4CBB17;
  z-index: 10000000;
}

.top_level_bar_text {
  color : #000000;
  text-align : center;
  font-weight: bold;
}

.bottom_level_bar_container {
  position: sticky;
  bottom: 0;
  height: 15px;
  background-color: #4CBB17;
}

.bottom_level_bar_text {
  color : #000000;
  text-align : center;
  font-weight: bold;
}

.link_container {
  /* border-radius: 5px; */
    background-color: #0D2F4F;
    /* color: white; */
    /* margin: 10px; */
    padding: 15px;
    position: relative;
    /* box-shadow: 2px 2px 2px lightgrey; */
    display : flex;
    flex-direction : row;
    justify-content: flex-start;
    gap : 30px ;
  }

.link_font_color {
  color : lightgrey ;
  font-family : Arial;
  font-size : 15px ;
  font-weight: normal;
  text-decoration : none;
}

.drop_3_grid_container {
  display: grid;
  grid-template-columns: repeat(3, 25%);
  justify-content: space-evenly;
}

.drop_3_grid_item {
  display:flex;
  flex-direction: column;
  justify-content:center;
}

[AIMPED]

HI @guy13 welcome to the forums.

It sounds like as if you were using dash-bootstrap-components . If so, try adding fluid=True to the dbc.Container()

Maybe you could share your code to take a closer look instead of guessing

[guy13]

Currently I am not using any dbc. I have updated my post to share example snippets to show what is going on.

Thank you for your help!

[AIMPED]

Hi @guy13 I had the same question not too long ago:

Basic app layout, why can I see a margin in my browser?

Hi there, I have a pretty basic question. Lets take this example: import dash from dash import html app = dash.Dash(__name__) app.layout = html.Div( [ html.Div( 'navbar', style={ 'background-color': 'red', 'height': '10vh', 'margin': '0', 'padding': '0' }, ), html.Div( 'content1', style={ 'background-color': 'blue', …

The solution is adding this to your custom css:

body {
    margin: 0px;
    padding: 0px;
}

[guy13]

@AIMPED thanks for sharing, but also through lots of searching I was able to remove the margins on the left and right of the screen.

I am new to HTML and CSS so hope I can explain this, but the outer most div that is first set up in the layout I added a className = ‘page_layout’

page_layout.css

.page_layout {
  width : 100%;
  position : absolute ;
  left : 0px ;
}

This seems to have fixed my visual issue, but any advice on whether this is in poor taste or improper css would be appreciated. The width of 100% was needed as subsequent pages within the app did not stay full screen without it.

Modified app.py showing the change

import dash
from dash import Dash, html, dcc

app = Dash(__name__,use_pages=True)

app.layout = html.Div(children = [
    html.Div(className='top_level_bar_container', children=[
        html.H5(
            "Top Page",
        className = 'top_level_bar_text',)],
    ),
	# html.H4('Links below to each subtopic:'),
    html.Div(id = "SplashPageLinks",children = [
            dcc.Link("HOME",href = "/",className = 'link_font_color',)
        ],
        className = 'link_container',
    ),
	dash.page_container,
    
    #Create store to save data across pages
    dcc.Store(id = "DataStore",data = {}),
    
    html.Div(children=[
                html.H5(children="Bottom Page",
                        className='bottom_level_bar_text',
                )],
            className = 'bottom_level_bar_container',
            ),
    ],
    className = 'page_layout',
)

if __name__ == '__main__':
    ## Initializes and run in debug mode
    app.run_server(debug=True,port=8050)
    app.config['suppress_callback_exceptions'] = True