Blank section appear when using Jinja2/Flask

Question

I'm creating a website and it works fine when i use direct html. Now i want to use Jinja2 to render my template and there is something wrong. You can see that there is a blank space on top of my page here http://kgroupman.azurewebsites.net/ but it works fine with firefox. Inspect element do not point out that blank section and there is no padding or margin and there is nothing wrong with the source. Please help!

Here is the code:

base.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>
        {% block page_title %}{% endblock %}
    </title>
    <!--BASE CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename='css/base.css')}}" />
    <!--ADDITIONAL CSS-->
    {% block additional_css %}

    {% endblock %}
    <!--BASE SCRIPT-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!--ADDITIONAL SCRIPT-->
    {% block additional_script %}

    {% endblock %}
</head>
<body>
    <section class="header">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span><img src="{{url_for('static', filename='imgs/4logo.png')}}" id="logo"></span></a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right"></ul>
                </div>
            </div>
        </nav>
    </section>
    <section class="body">
        <div class="left-panel">
            {% block body_left %}

            {% endblock %}
        </div>
        <div class="right-panel">
            {% block body_right %}

            {% endblock %}
        </div>
    </section>
    <section class="footer">
        <span>@Ngo Tuan Khoa - 2016</span>
    </section>
</body>
</html>

login.html

{% extends "base.html" %}

{% block page_title %}Đăng nhập | Quản lý nhóm{% endblock %}

{% block additional_css %}
    <link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}" />
{% endblock %}

{% block additional_script %}
    <script src="../static/script/login.js"></script>
{% endblock %}

{% block body_left %}
<div class="login-form">
    <p><img id="login-icon" src="{{url_for('static', filename='imgs/user.jpg')}}"></p>
    <form action="" method="POST">
        <p>Tên đăng nhập</p>
        <p><input type="text" class="input-field" placeholder="Username"></p>
        <p>Mật khẩu</p>
        <p><input type="password" class="input-field" placeholder="Password"></p>
        <p><input type="button" class="btn-login" value="Đăng nhập"></p>
    </form>
</div>
{% endblock %}

{% block body_right %}
<img src="{{url_for('static', filename='imgs/wall.jpg')}}" height="100%" class="img-responsive">
{% endblock %}

score 0 · Answer 1 · answered Jun 26 '16 at 06:11

0

It's a character at the top of your body

answered Jun 26 '16 at 06:11

Anthony Astige

1,919
1
13
18

But it works fine with firefox and there is no weird character in the source :( – tuankhoa1996 Jun 26 '16 at 06:40
It looks like Firefox removes the character, but Chrome renders it as a blank space. When I save the page's source it's rendering as `` in vim for me, right after the opening `` tag. Your editor may or may not show the character. I suggest deleting any whitespace after your `` tag and seeing if that helps. – Anthony Astige Jun 26 '16 at 06:52
There is no white space before or after my body tag :(. Where is that character come from :( – tuankhoa1996 Jun 26 '16 at 07:01
In `base.html` in the original post I see whitespace after `` – Anthony Astige Jun 26 '16 at 07:51
No luck! :(, double checked! – tuankhoa1996 Jun 26 '16 at 07:58
Perhaps run `base.html` through a [script to remove non ascii characters](http://stackoverflow.com/a/3264957/4747661) – Anthony Astige Jun 26 '16 at 08:02
This is so weird! :(! It works perfectly when i use direct login.html file with no base.html. Then i just create base.html, copy and paste code. :( – tuankhoa1996 Jun 26 '16 at 08:27
Solution found. Delete login.html and recreate it. There's must be an invisible character that i can't see somehow! thank you so much! :) – tuankhoa1996 Jun 27 '16 at 13:40
Happy to hear you got it fixed :) – Anthony Astige Jun 27 '16 at 16:11

score 0 · Answer 2 · answered Jun 27 '16 at 14:02

0

Solution found. Delete login.html and recreate it. There's must be an invisible character that i can't see somehow!

answered Jun 27 '16 at 14:02

tuankhoa1996

131
4
18

Blank section appear when using Jinja2/Flask

2 Answers2