I have a local CSS file and some JavaScript code to create an animated background inside an assets
directory inside my working directory. When I setup my Dash app like the following, I see my animated background without trouble, but none of the Dash app elements that I have (such as the tabs from Dash’s example) are visible. The JavaScript is rendered onto the “layer1
” canvas. Even if I specify style={'zIndex':10000}
on mydcc.Tabs
, it still doesn’t show up. Code is below. Thoughts?
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.title = "YadaYadaYada"
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
{%css%}
<canvas id = 'layer1'></canvas>
{%scripts%}
{%config%}
</head>
<body>
{%app_entry%}
</body>
</html>
'''
app.layout = html.Div([
html.H1('Dash Tabs component demo', style={
'textAlign': 'center', 'margin': '48px 0', 'fontFamily': 'system-ui'}),
dcc.Tabs(id="tabs", children=[
dcc.Tab(label='Tab one', children=[
html.Div([
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5],
'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
]),
dcc.Tab(label='Tab two', children=[
html.Div([
html.H1("This is the content in tab 2"),
html.P("A graph here would be nice!")
])
]),
dcc.Tab(label='Tab three', children=[
html.Div([
html.H1("This is the content in tab 3"),
])
]),
],
style={
'fontFamily': 'system-ui'
},
content_style={
'borderLeft': '1px solid #d6d6d6',
'borderRight': '1px solid #d6d6d6',
'borderBottom': '1px solid #d6d6d6',
'padding': '44px'
},
parent_style={
'maxWidth': '1000px',
'margin': '0 auto'
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)