Search code examples
pythonflaskjinja2

Flask html templates inheritance issue - mixed elements

everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask</title>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <header>
        <h1>Some header</h1>
    </header>
    <content>
        {% block content %}{% endblock %}
    </content>
</body>
</html>

Second one "main.html":

{% extends "layout.html" %}

{% block content %}<p>test</p>{% endblock %}

Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body: 

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
        <h1>Some header</h1>
</header>
<content>
    <p>test</p>
</content>
</body>
</html>

Can anyone explain why this happens?

Solution

  • Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.