Hi All,
I tried to build a navigation bar with Dash.
Code running in laptop gives the navigation bar as I want (figure below).
However, when I run the same code in one VM created in Google cloud (GCP), it looks like this:
Some how the navigation bar and dropdown menu are not rendered properly.
Could you please let me know what should I do to solve this issue?
Thank you,
The source code is below (from here covid-dash-app/index.py at master · meredithwan/covid-dash-app · GitHub)
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
# must add this line in order for the app to be deployed successfully on Heroku
from app import server
from app import app
# import all pages in the app
from apps import global_situation, singapore, home
# building the navigation bar
# https://github.com/facultyai/dash-bootstrap-components/blob/master/examples/advanced-component-usage/Navbars.py
dropdown = dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem("Home", href="/home"),
dbc.DropdownMenuItem("Global", href="/global_situation"),
dbc.DropdownMenuItem("Singapore", href="/singapore"),
],
nav = True,
in_navbar = True,
label = "Explore",
)
navbar = dbc.Navbar(
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src="/assets/virus.png", height="30px")),
dbc.Col(dbc.NavbarBrand("COVID-19 DASH", className="ml-2")),
],
align="center",
no_gutters=True,
),
href="/home",
),
dbc.NavbarToggler(id="navbar-toggler2"),
dbc.Collapse(
dbc.Nav(
# right align dropdown menu with ml-auto className
[dropdown], className="ml-auto", navbar=True
),
id="navbar-collapse2",
navbar=True,
),
]
),
color="dark",
dark=True,
className="mb-4",
)
def toggle_navbar_collapse(n, is_open):
if n:
return not is_open
return is_open
for i in [2]:
app.callback(
Output(f"navbar-collapse{i}", "is_open"),
[Input(f"navbar-toggler{i}", "n_clicks")],
[State(f"navbar-collapse{i}", "is_open")],
)(toggle_navbar_collapse)
# embedding the navigation bar
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
navbar,
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/global_situation':
return global_situation.layout
elif pathname == '/singapore':
return singapore.layout
else:
return home.layout
if __name__ == '__main__':
app.run_server(debug=True)