django-plotly-dash icon indicating copy to clipboard operation
django-plotly-dash copied to clipboard

Local CSS not applying to template

Open ghost opened this issue 6 years ago • 4 comments

I am trying to apply local CSS to Dash. I have an 'assets' folder for the app containing an image and a CSS file. After running 'collectstatic', the assets appear seemingly where they should, in a directory with root 'STATIC_ROOT/dpd/assets' and the image is accessible as shown in the example 'demo_nine', but the CSS is not applying. Inspecting the source of the app, there is not any reference to the CSS in the underlying HTML. Is there an additional step needed to associate the styling with the app? Something like the following (which causes an error):

app = DjangoDash("app_name", serve_locally=True)
app.css.append_css("path_to_css")

It seems like this was resolved with #133, which makes me think I am missing a step.


Relevant version info:

dash==0.42.0
dash-bootstrap-components==0.6.0
dash-core-components==0.47.0
dash-html-components==0.16.0
dash-renderer==0.23.0
dash-table==3.6.0
Django==2.0.1
django-appconf==1.0.2
django-bootstrap==0.2.4
django-bootstrap4==0.0.8
django-plotly-dash==0.9.11
dpd-components==0.1.0
dpd-static-support==0.0.4
Flask==1.0.2
Flask-Compress==1.4.0
whitenoise==4.1.2```

ghost avatar May 21 '19 20:05 ghost

This could be an issue. Can you check if a different member of the assets directory (eg an image file) is correctly served?

GibbsConsulting avatar May 27 '19 16:05 GibbsConsulting

Image files are serving correctly. After doing collectstatic, I have two static files associated with my project, logo.png and style.css. I can access logo.png by referencing assets/logo.png from within my project. However, the style.css does not render. I can always do the workaround where I apply the CSS to the iframe from within the parent HTML file if need be.

ghost avatar Jun 03 '19 14:06 ghost

Thanks for the update. This certainly sounds like files aren't getting added to the html unless explicitly listed.

GibbsConsulting avatar Jun 03 '19 14:06 GibbsConsulting

I was having a similar issue with static files - whether stored locally or on Amazon S3. As a workaround, I ended up using the append_css and append_script methods from the DjangoDash class as follows:

================================================================= external_stylesheets = [ { 'external_url': 'https://path_to_file/mystylesheet_01.css', 'external_url': 'https://path_to_file/mystylesheet_02.css', },]

external_stylesheets = [ { 'external_url': 'https://path_to_file/myscript_01.js', 'external_url': 'https://path_to_file/myscript_02.js', },]

dashapp = DjangoDash(name='my_dash_app', serve_locally=False, expanded_callbacks=True, add_bootstrap_links=False, suppress_callback_exceptions = True, routes_pathname_prefix='/dashapp/' )

    # Setup Dash Index String and Initial Layout
dashapp = init_dash(dashapp)

# Add external stylesheets
for stylesheet in external_stylesheets:
	dashapp.css.append_css(stylesheet)

# Add external scripts
for script in external_scripts:
	dashapp.scripts.append_script(script)

==================================================

tachyon663 avatar Nov 06 '19 20:11 tachyon663