I am trying to load a django-plotly-dash app onto a page in my django project, where I am building the pages using standard bootstrap components and css. However I am unsure why the dash app always creates a huge empty space below it, and was wondering if anyone has encountered a similar issue and has found a way around it.
Thanks in advace
Jason
dashboard.py
import dash
import dash_html_components as html
from django_plotly_dash import DjangoDash
import plotly.express as px
import pandas as pd
import dash_core_components as dcc
import dash_bootstrap_components as dbc
external_stylesheets = ['dbc.themes.BOOTSTRAP']
app = DjangoDash('Example')
# Define the app
app.layout = html.Div(children=[
html.Div(className='row', # Define the row element
children=[
html.Div(className='four columns',
# style=fourColumnStyle,
children = [
html.H2('Dash - TEST', style = {'color' : 'Azure'}),
html.P('''Testing for empty space for Plotly - Dash''', style = {'color' : 'LightGrey'}),
]
)
])
])
index.html
<!-- Load CSS -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Custom fonts for this template-->
<link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/solar/bootstrap.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper">
<div class="container-fluid">
{%load plotly_dash%}
{% plotly_app name='Example' ratio=1 %}}
<div>This is a test</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin.min.js' %}"></script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
