Django Dash bootstrap not working

Dash Python
1

I have the following code in my djangodash

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash
import dash_bootstrap_components as dbc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = DjangoDash('app2', external_stylesheets=external_stylesheets,add_bootstrap_links=True)
dropdown = dbc.DropdownMenu(
    label="Menu",
    children=[
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
        dbc.DropdownMenuItem("Item 3"),
    ],
)
app.layout = html.Div([dropdown])

In my html form I reference as:

<div class="{% plotly_class name='app2' %} card" style="height: 100%; width: 100%">
  {% plotly_app name='app2' ratio=0.6 %}
</div>

Nothing is displayed.Could you help me in resolving this issue? I am new to djangodash and unfortunately facing issues although I am successful to a certain extent in resolving them @delsim

2

Take a look at this using bootstrap guide - setting this up correctly needs a bit of care

3

What does prepare_demo script mean in the guide you mentioned? I did everything else apart from that @delsim

4

Its a configuration script for the demo that is part of the django-plotly-dash codebase. You can find the master version here

Essentially, it executes Django migrate and collectstatic steps.

5

I followed all the steps as given in script too.
My settings.py is as follows:

INSTALLED_APPS = [
   # 'channels',
    #'dash-bootstrap-components',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home.apps.HomeConfig',
    'django_plotly_dash.apps.DjangoPlotlyDashConfig',
    'bootstrap4',
    'channels_redis',
    #'channels']
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django_plotly_dash.middleware.BaseMiddleware',
    'django_plotly_dash.middleware.ExternalRedirectionMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Plotly.urls'
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'Plotly.wsgi.application'
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]
LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

CRISPY_TEMPLATE_PACK = 'bootstap4'

ASGI_APPLICATION = 'Plotly.routing.application'
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            'hosts': [('127.0.0.1', 6379),],
        }
    }
}

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django_plotly_dash.finders.DashAssetFinder',
    'django_plotly_dash.finders.DashComponentFinder',
    'django_plotly_dash.finders.DashAppDirectoryFinder',
]

PLOTLY_COMPONENTS = [
    'dash_bootstrap_components',
    'dash_core_components',
    'dash_html_components',
    'dash_renderer',
    'dpd_static_support',
    'dpd_components',
    
]

PLOTLY_DASH = {
    # Route used for the message pipe websocket connection
    "ws_route" :   "dpd/ws/channel",

    # Route used for direct http insertion of pipe messages
    "http_route" : "dpd/views",

    # Flag controlling existince of http poke endpoint
    "http_poke_enabled" : True,

    # Insert data for the demo when migrating
    "insert_demo_migrations" : False,

    # Timeout for caching of initial arguments in seconds
    "cache_timeout_initial_arguments": 60,

    # Name of view wrapping function
    "view_decorator": None,

    # Flag to control location of initial argument storage
    "cache_arguments": True,

    # Flag controlling local serving of assets

    "serve_locally": False,
}
STATICFILES_LOCATION='static'
STATIC_URL = '/static/'
STATIC_ROOT='static'
STATICFILES_DIRS=[os.path.join(BASE_DIR,'Plotly/static')]

X_FRAME_OPTIONS = 'SAMEORIGIN'

My app2.py is:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash
import dash_bootstrap_components as dbc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = DjangoDash('app2', external_stylesheets=[dbc.themes.BOOTSTRAP],add_bootstrap_links=True)

app.layout = 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")))
            ])
        ])

Reference in HTML is as follows:

{% load plotly_dash %}
<head>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div class="{% plotly_class name='app2' %} card" style="height: 100%; width: 100%">
  {% plotly_app name='app2' ratio=0.6 %}
</div>
</body>

Is there anything I am doing wrong?DjangoDash works fine but bootstrap doesn’t work. Also when I add ‘channels’ in installed_apps I am getting an error like
AttributeError: module ‘time’ has no attribute ‘clock’ @delsim

6

If you use the bootstrap example app from the django-plotly-dash github repo, does that work? If not, examine what error(s) are reported.

Once you have that working, start adding in the ingredients that make your app different, one at a time.

The channels error could well be to do with package versions, but is a separate issue to getting bootstrap working - I would simply not use it whilst fixing the bootstrap configuration.

7

example app doesn’t work too @delsim When I look at debug console of browser,I see the following error:
Error: “dash_bootstrap_components was not found.”

8

It is necessary include ‘bootstrap4’ before ‘channels’ on INSTALLED_APPS. This was functional for me.