Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

plotly_direct tag overwrites template style set in base.html #489

Open
GarderesG opened this issue Feb 13, 2024 · 3 comments
Open

plotly_direct tag overwrites template style set in base.html #489

GarderesG opened this issue Feb 13, 2024 · 3 comments
Labels
question Further information is requested

Comments

@GarderesG
Copy link

GarderesG commented Feb 13, 2024 •
edited
Loading

Hi @delsim, thank you for the very nice package, I am a big fan of it.

On my django project, I have a Dash webapp (Dashboard) that I am serving on my homepage.html template with plotly_direct tag.

  1. The Dash app layout is inside a Div with darkmode on as you can see below with the bg-dark className.
    dash_app.py
app = DjangoDash('Dashboard', 
                 add_bootstrap_links=True,
                 external_stylesheets=["static/assets/buttons.css"]
                 )  
app.layout = html.Div(children=[some_components], className="bg-dark")
  1. The homepage.html template extends a base.html template, with dark mode on as you can see on the second line in the html tag.

base.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
	{% load static %}
	{% load plotly_dash %}
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity_no="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity_no="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
	{% plotly_header %} 
	<title>PEA Manager</title>
</head>
<body>
	<div class="container">
		{% include 'navbar.html' %}
		{% block content %}
		{% endblock %}
	</div>

</body>

{% plotly_footer %}
</html>
  1. The beginning of my homepage.html template is as follows:
{% extends 'base.html' %}

{% block content %}

<h1 style="color:white" >Portfolio performance comparison</h1>
<hr>

<div class="plotly-app">
  {% load plotly_dash %}
  {% plotly_direct name="Dashboard" %}
</div>
...
{% endblock %}

Problem: My h1 tag, hr tag, and everything I write outside the dash app had light mode on, despite having set the base template to be in darkmode. When I remove the plotly_direct tag, everything goes back to normal darkmode.

Is there a way to fix this without dropping plotly_direct?
@GibbsConsulting
Copy link
Owner

@GarderesG the template tag - which incidentally can be overridden like any other Django template - doesn't do very much and doesn't introduce any css of its own so its probably not the cause of this issue.

If you look inside the page using your browser's developer tools/console, can you see where the css changes? Could it be something in your Dash app?

@GibbsConsulting GibbsConsulting added the question Further information is requested label Feb 14, 2024
@GarderesG
Copy link
Author

Hi @delsim, thank you for your reply.

You were right. I kept investigating, and eventually found my issue: when instantiating my Dash app with DjangoDash constructor, I set the parameter add_bootstrap_links to True. When set to False, my problem disappears, and the bootstrap used in the Dash app (from dash_bootstrap_components or custom bootstrap CSS) is still correctly displayed.

Consequently, it is not clear to me what add_bootstrap_links is for, based on my reading of the documentation. Could you give me additional details?

@GarderesG
Copy link
Author

Hi @delsim, would you have an idea on why add_bootstrap_links parameter in the constructor interferes with Dash Bootstrap Components when used with the plotly_direct tag?

I also have a question regarding the plotly_direct tag: do you plan on opening the possibility to pass initial_arguments parameter as with the other tags? I believe that when one wants to pass initial_arguments, there is no alternative to using iframes which I find quite painful with long Dash apps (double scrollbars, even with hidden overflow).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@GibbsConsulting @GarderesG