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!