CODEWITHSUNDEEP
pythonhtmlflaskjinja2
Dries De Backker
Dries De Backker

Reputation: 113

Jinja2 puts layout's head + unwanted break in child's body

I recently started using flask/python but I seem to have a problem with Jinja2 that I can't resolve on my own. I have a layout.html template like this: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some Title</title>
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' media='screen and (max-width: 800px)' href="{{ url_for('static', filename='styles/style_mobile.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1200px)' href="{{ url_for('static', filename='styles/style_middle.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 1200px)' href="{{ url_for('static', filename='styles/style_desktop.css') }}" />
</head>

<body>
  <div>Some header</div>
  {% block content %}{% endblock %}
  <div>Some footer</div>
</body>
</html>

And a number of child templates extending the layout like this:

{% extends "layout.html" %}
{% block content %}
<div class="content-wrapper">
Here be content.
</div>
{% endblock %}

When I went to one of my child pages in my browser, I expected to see a full copy of my layout template, including the same head with only the content of the child added at the right place. Instead, I got:

<head>
some chrome extensions
</head>
<body>
"&#65279;


"
<meta charset="utf-8">
<title>Some Title</title>
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' media='screen and (max-width: 800px)' href="{{ url_for('static', filename='styles/style_mobile.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1200px)' href="{{ url_for('static', filename='styles/style_middle.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 1200px)' href="{{ url_for('static', filename='styles/style_desktop.css') }}" />
<div>Some header</div>
<div class="content-wrapper">
Here be content.
</div>
<div>Some footer</div>

So the layout template is extended with the content of the child alright, but the content of the head is in the body and there is an unwanted break at the top of the page, pushing the layout down. When I click source in my Chrome browser though (as opposed to elements), it shows the code of the child template extended in the layout template just as it is supposed to be... I can't seem to wrap my head around this. How do I resolve this? Thank you in advance.

Upvotes: 5

Views: 933

Answers (1)

Dries De Backker
Dries De Backker

Reputation: 113

I solved the problem. It had something to do with BOM (byte order mark). Saving my files in a text editor with 'add BOM tag to file' disabled got rid of the &#65279; at the beginning of the page. The contents of the head tag are left alone now as well.

Upvotes: 6

Related Questions