plotly_direct tag overwrites template style set in base.html

GarderesG commented 9 months ago

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.

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")

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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="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>

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 commented 9 months ago

@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?

GarderesG commented 9 months ago

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 commented 9 months ago

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).

GibbsConsulting / django-plotly-dash

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