prevent css inheritance from jinja2 include

Question

I have a simple HTML page (main.html) rendered via jinja2/flask.

main.html

{% extends 'layout.html' %}

{% include 'content1.html' %}
{% include 'widget1.html' %}
{% include 'widget2.html' %}

layout.html includes some CSS (bootstrap), JS and some HTML (header/menu) for all pages.

I was hoping to very simply include within this html page, a few content templates and a few 'widgets'. The widgets are more complex in that they include their own JS and CSS (bootstrap) ... This is causing trouble as the CSS within widget1.html is overriding the CSS of the main.html (not unexpected given the include).

Is there some way to 'include' widget1.html without actually having the CSS/JS within come back to the parent page (main.html)?

I'd prefer to not have to refactor widget1.html as it is an external app. Is there a simple solution here?

Thanks in advance!

Have you tried wrapping the links to external css inside a block? something like {% block links %} {% endblock %} — booluw, Jun 21 '18 at 01:27
@Jayson_X - thanks for the tip. Tried to wrap the css inside of a block, but it did not solve the issue. Removing the css completely does works (but causes other issues within the widgit. ---- — Bryan, Jun 21 '18 at 01:47
Then instead of extending the layout, why not include it like everyone else. Or you remove the conflicting css rule from your own css file. — booluw, Jun 21 '18 at 01:52
Extend vs Include for layout.html makes no difference in my hands. Given that the main page (and entire UI in general) is using a singular bootstrap CSS, the fact that the external widget is also using bootstrap (different css) causes many (if not all) css rules to clash. I could simply remove the use of bootstrap within the widget, but then I would loose some of the widget-specific formatting. — Bryan, Jun 21 '18 at 02:01
Yes agreed, nothing to do with flask here. Though I would imagine others would have run into similar issues (>2 bootstrap deployments on single page?). Seems like I just need some way to isolate the 'widget1.html' code - if even possible. Sorry, not a front-end dev myself :) — Bryan, Jun 21 '18 at 13:58

score 1 · Answer 1 · answered Jun 21 '18 at 14:42

1

See this answer: How To Isolate a div from public CSS styles?

You could create a wrapper class, .isolate, and use it as follows:

p {
  color: blue;
}

.isolate * {
  all: unset;
}

.example {
  border: 1px solid;
  padding: 1em;
}

<p>By default all text is blue.</p>
<div class="isolate example">
  <p>Within the "isolate" div, that CSS is removed</p>
</div>
<p>Outside of the div, default rules apply once again.</p>

answered Jun 21 '18 at 14:42

wiiiiilllllll

630
6
11

I came across this comment as I'm working with a similar problem. This is a great solution if no css is needed within the tag (and children) being isolated, but prevents css inside the isolated set from taking effect. In my case, I need to entirely replace the css for the content I'm including. – Brandon Barney Jun 03 '23 at 20:38

score 1 · Answer 2 · answered Oct 17 '19 at 18:29

I had the same problem here. Even changing the .css, the wasn't reloading because the browser was caching the information. I found a really easy way to do it.

The way I solved it was using importing the ctime from the time module like this:

from time import ctime

Then, I went attributed the ctime() function to time inside my flask route. Like this:

#

#@app.route('/home')
## def homepage():
##     return render_template('home.html' , time = ctime())

And then, in my html href, I did this:

## <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css')}}?{{time}}">

add by the end of your reference path the ?{{time}} with that, the time information will be updated every second and the browser will not recognize the css and cache it, since the browser compares the new information with the previous one.

With this, you will be your real-time css.

hope this helps.

Cheers!

-Nelio

score 0 · Answer 3 · answered Jun 08 '23 at 16:45

I know this is an old thread, but I came across this repeatedly during my search to solve a similar problem. I ended up wrapping the content in an iframe using the srcdoc property. It looks like this:

<tr class="collapse" id="emailHTMLBody-{{ index }}">
  <td colspan="7">   
    <div class="email-body-container">
      <iframe srcdoc="{{ email.body_content }}"></iframe>
    </div>
  </td>
</tr>

I hope this helps the next person to stumble across this issue.

prevent css inheritance from jinja2 include

3 Answers3