How to add css files to Django-Dash-Plotly

Dash Python
1

Greetings, so I have already connected and loaded my dash app.py into django. Everything works great!

I seem to be running into this layout issue when I want a fixed column = image

I’m trying to figure out where to create my assets folder within my django project to store the custom CSS file to fix the issue above as per this solution : Another User had the same issue and solved it

This is the solution:

.dash-spreadsheet .row {
  flex-wrap: nowrap;
}

I notice that in the same directory where I have my dash app.py in django, there is a static>dash folder, so I made my assets folder in there but couldn’t get it to work. According to this Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly , I should have an assets folder that Dash can read directly.

Here are my settings.py from django

INSTALLED_APPS = [
    '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',
    'channels',
    'channels_redis',
    'bootstrap4',

]

MIDDLEWARE = [

      'django.middleware.security.SecurityMiddleware',


      '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',
  ]


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 = [

    # Common components
    'dash_core_components',
    'dash_html_components',
    'dash_renderer',

    # django-plotly-dash components
    'dpd_components',
    # static support if serving local assets
    'dpd_static_support',

    # Other components, as needed
    'dash_bootstrap_components',
    
]

Could anyone direct me where in my directory I should add the custom css files to help solve my original issue?

2

Take a look at the documentation here on serving local assets.

3

Should I only add serve_locally = True in my settings.py?

like so:

PLOTLY_DASH = {
                'serve_locally' = True
}

I also see that some people put it inside their dash-django app.py argument. Which one would you recommend?

sorry if its obvious but after reading that documentation I’m still not sure where to place my local CSS files.

EDIT: I’ve tested both ways to implement serve_locally, neither works as the application keeps loading and gets stuck on HTTP GET for all Dash components.

4

@andres1 I think the best way forward would be to work through the documentation. It is nowhere near perfect, but it should be enough for you to get your app(s) working as desired.

If (when?) the documentation isn’t clear then raise that in the project’s issue tracker on github - this way the documentation can be improved for everyone.

5

To add css link in django dash framework
use below code and its works

app = DjangoDash('ReportOpt',add_bootstrap_links=True)  
app.css.append_css({ "external_url" : "/static/assets/css/dashstyle.css" })
1 Like
6

thank you for this!!!