I tried to create columns block in dash app with code below:
import os
import sys
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
def init_dashboard(server):
"""Create a Plotly Dash dashboard."""
dash_app = dash.Dash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[{"name": "viewport", "content": "width=device-width"}],
server=server,
routes_pathname_prefix="/distfinder/"
)
html_file_path = os.path.join(os.getcwd(), 'templates', 'dashapp.html')
print(html_file_path)
with open(html_file_path, 'r') as f:
html_layout = f.read()
dash_app.index_string = html_layout
def serve_layout():
html_element = html.Div([
html.Div([
html.H1("Bootstrap Grid System Example")
,dbc.Row(dbc.Col(html.Div(dbc.Alert("This is one column", color="primary"))))
,dbc.Row([
dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary")))
,dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary")))
,dbc.Col(html.Div(dbc.Alert("One of three columns", color="primary")))
])
])
])
return html_element
dash_app.layout = serve_layout
return dash_app.server
However, I still receive the display like below: enter image description here
I am building a dashapp which is nested in my flask website, and had to create a separate instance of Dash in one particular page, while the rest of the flask website runs through wsgi.py. The file structure looks something like below:
personal_website
+--separate_dash_folder
| |--dashboard.py <- where my dashapp reside
|
+--static
| |
| +--css
| +--js
| +--files
| +--fonts
| +--img
|
+--templates
| |
| +--base.html
| +--dashapp.html
| +--home.html
| \--the rest
|
+--flaskapp.py
+--wsgi.py
I went through a few stackoverflow questions but none of them seem to solve my problem. dash_bootstrap_components installed succesfully but no recognised How to Fix My Plotly Dash App Not Organizing Properly
