SimpleExample not rendering #214
Description
Hi,
I'm trying to start learning Plotly Dash with Django via django-plotly-dash app. Thank you for the great work!
I'm running Django 3.0 in an Anaconda environment. I've installed Dash from the conda-forge channel:
https://github.com/conda-forge/dash-feedstock#installing-dash
and django-plotly-dash with pip into the Anaconda:
https://stackoverflow.com/a/43729857
I've then tried to follow the installation guide and added django_plotly_dash to INSTALLED_APPS in the Django settings.py file as well as registered routing in urls.py file and run manage.py migrate.
Finally, I've copied the code from the Simple usage into my views.py:
from django.shortcuts import render
import dash
import dash_core_components as dcc
import dash_html_components as html
from django_plotly_dash import DjangoDash
app = DjangoDash('SimpleExample') # replaces dash.Dash
app.layout = html.Div([
dcc.RadioItems(
id='dropdown-color',
options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']],
value='red'
),
html.Div(id='output-color'),
dcc.RadioItems(
id='dropdown-size',
options=[{'label': i,
'value': j} for i, j in [('L', 'large'), ('M', 'medium'), ('S', 'small')]],
value='medium'
),
html.Div(id='output-size'),
])
@app.callback(
dash.dependencies.Output('output-color', 'children'),
[dash.dependencies.Input('dropdown-color', 'value')])
def callback_color(dropdown_value):
return "The selected color is %s." % dropdown_value
@app.callback(
dash.dependencies.Output('output-size', 'children'),
[dash.dependencies.Input('dropdown-color', 'value'),
dash.dependencies.Input('dropdown-size', 'value')])
def callback_size(dropdown_color, dropdown_size):
return "The chosen T-shirt is a %s %s one." % (dropdown_size,
dropdown_color)
def index(request):
return render(
request=request,
template_name='web/hello_world.html'
)
My hello_world.html template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Django Dash Example</title>
</head>
<body>
{% load plotly_dash %}
{% plotly_app name="SimpleExample" %}
<p>Hello World!</p>
</body>
</html>
All seems good. I don't get any error messages and after loading the view, I can see the SimpleExample StatelessApp instance in the Django admin. However, the loaded page has only empty space before the Hello World! text. The source of the page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Django Dash Example</title>
</head>
<body>
<div style="
position: relative;
padding-bottom: 10.0%;
height: 0;
overflow:hidden;
">
<iframe src="/django_plotly_dash/app/SimpleExample/" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
" frameborder="0"></iframe>
</div>
<p>Hello World!</p>
</body>
</html>
So, the iframe is there but nothing shows in the page.
I've checked the issues 116 and 102 but they seem different.
What am I missing?