How to add css files to Django-Dash-Plotly

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 =

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 https://dash.plotly.com/external-resources , 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?

1 post - 1 participant

Read full topic