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 %} <link href="~~"/>{% endblock %} — booluw
– booluw, Commented Jun 21, 2018 at 1: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. ---- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/screen.css') }}"> — Bryan
– Bryan, Commented Jun 21, 2018 at 1: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
– booluw, Commented Jun 21, 2018 at 1: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
– Bryan, Commented Jun 21, 2018 at 2: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
– Bryan, Commented Jun 21, 2018 at 13:58

wiiiiilllllll · Accepted Answer · 2018-06-21 14:42:13Z

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, 2018 at 14:42

wiiiiilllllll

5776 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brandon Barney Over a year ago

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.

Nelio Batista · Accepted Answer · 2019-10-17 18:29:54Z

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

Brandon Barney · Accepted Answer · 2023-06-08 16:45:11Z

0

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.

answered Jun 8, 2023 at 16:45

Brandon Barney

2,3921 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

prevent css inheritance from jinja2 include

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related