Dash Layout Help - Fitting html.Div to Browser Window

Hello,

I have been wrestling with getting my Dash app to fit nicely within the browser window. As it stands, the bottom right of the app looks like this:

I have all my components in a single html.Div() container. I have set the background color of this Div to be the grey-ish color from the preceding image. I am not sure why this color (and the div itself?) do not extend to the edge of my window, instead leaving me with scroll bars?

I have tried a handful of key value pairs in the Style dictionary of my Div component such as:

style = {‘width’: ‘100%’}
style = {‘minWidth’ : ‘100’}
style = {‘width’ : ‘100vw’}

But none of these in the Style property of my Div component have been able to “stretch” the grey Div color to fill the white space.

The only other things of note would be:

1.) I am using a dashbootstrap theme as an external style sheet.
2.) I have a shadow effect on the upper dash table in the image, but removing that does not alleviate the issue.

My code (not including callbacks) is as follows:

app = JupyterDash(__name__, external_stylesheets = [dbc.themes.LITERA])

app.layout = html.Div([
    html.H1("Recipe Selector Dashboard"),
    html.Br(),
    html.H6("The following dashboard will assist the user in deciding what recipe to cook based on what ingredients they have on hand. The user works downwards through the interactive components."),
    html.Br(),
    html.Label('First, enter the ingredients you wish to use: '),
    dcc.Dropdown(id = 'ingredient_dropdown', options = ingredient_dict, value='java chip ice cream', multi=True),
    html.Br(),
    html.Br(),
    dash_table.DataTable(
        id='recipe_datatable',
        columns=[{"name": i, "id": i} for i in (recipe_rating_3.columns)], #NOTE! Here columns are based on recipe_rating_3 but two lines down sees data from recipe_rating_2!
        style_table={'overflowX': 'auto', 'boxShadow' : '8px 8px 8px grey', 'tableLayout' : 'fixed'},    #adds horizontal scrollbar to the table TEST
        data=recipe_rating_2.to_dict('records'),  # starts table with all data 
        editable=False,              # allow editing of data inside all cells
        filter_action="native",     # allow filtering of data by user ('native') or not ('none')
        sort_action="native",       # enables data to be sorted per-column by user or not ('none')
        sort_mode="single",         # sort across 'multi' or 'single' columns
        column_selectable="multi",  # allow users to select 'multi' or 'single' columns
        row_selectable="single",     # allow users to select 'multi' or 'single' rows
        row_deletable=True,         # choose if user can delete a row (True) or not (False)
        selected_columns=[],        # ids of columns that user selects
        selected_rows=[],           # indices of rows that user selects
        page_action="native",       # all data is passed to the table up-front or not ('none')
        page_current=0,             # page number that user is on
        page_size=8,                # number of rows visible per page
        hidden_columns = (['Recipe_ID', 'Directions']),
        style_cell={'whiteSpace': 'normal','height': 'auto', 'fontSize': 14, 'font-family':'sans-serif'},
        style_header={'backgroundColor': '#A9DFBF', 'fontWeight': 'bold', 'textAlign': 'center'},
        css=[{"selector": ".show-hide", "rule": "display: none"}] #Added this "hacky" solution to get rid of toggle columns button - Leaving for now seems to work!
),#end main dash table
    html.Br(),
    html.Br(),
    dbc.Row([
        dbc.Col(
            dcc.Graph(id = 'select_bar', style = {'boxShadow' : '8px 8px 8px grey'})#end bar graph COMPONENT
        ),#end bar graph COLUMN
        dbc.Col(
            dash_table.DataTable(
            id = 'review_table',
            columns = [{'name' : i, 'id' : i} for i in (reviews.columns)],
            sort_action="native",
            sort_mode="single",
            page_size=5,
            style_cell={'whiteSpace': 'normal','height': 'auto', 'fontSize': 14, 'font-family':'sans-serif', 'textAlign': 'left'},
            style_header={'backgroundColor': '#A9DFBF', 'fontWeight': 'bold', 'textAlign': 'center'},
            style_as_list_view=True,
            style_data_conditional=[{
                'if': {'column_id': 'Rating'},
                'textAlign': 'center', 'fontWeight': 'bold', 'width': '20%'
            }],    
            hidden_columns = (['recipe_id']),
            css=[{"selector": ".show-hide", "rule": "display: none"}]
            ),#end review table COMPONENT
        ), #end review table COLUMN   
    ]), #end Graph and review table row
    html.Br(),
    html.Br(),
    dcc.Checklist(id = 'step_list', style={"padding": "1px", "max-width": "800px"}, labelStyle={'display': 'block'}, inputStyle={"margin-right": "10px"}),
    html.Br()
    
], style={'backgroundColor':'#dfdfdf'})#end main Div

Ideally my app would look like this:

Any help would be great!

Hi @bdan123

I think the problem you are facing is because the Dash data table has as default a page_size of 250, you can assign a different value to that property, see the documentation about page_size here:
https://dash.plotly.com/datatable/reference

Hi Eduardo! Thanks for taking the time to read and help out. My page_size for my tables are set to 8 and 5, so, I am inclined to think that those might not be the issue. I’ll keep poking around and see if I can fit everything.

Hey @bdan123

Perhaps you need to use bootstrap components, it’s easy to implement an very responsively.
Look this link:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

@bdan123 So how I achieved this is by using containers, rows, and columns and assigning the fluid parameter to be true

below is the layout that I used to get rid of that extra space.

dbc.Container([
        dbc.Row([
                     dbc.Col(),
                     dbc.Col()])
],fluid=True)

Let me know if this worked for you. Thank you!

1 Like