I followed the steps in guide in https://django-private-chat.readthedocs.io/en/latest/readme.html:
base.html:
{% block extra_js %}{% endblock extra_js %}
settings.py:
INSTALLED_APPS = (
...
'django_private_chat',
...
)
CHAT_WS_SERVER_HOST = 'localhost'
CHAT_WS_SERVER_PORT = 5002
CHAT_WS_SERVER_PROTOCOL = 'ws'
urlpatterns = [
"other urls"
url(r'^', include('django_private_chat.urls')),
]
After starting the server I go to http://127.0.0.1:8000/dialogs/some-of-the-users and there is no result whatsoever, the page is empty.
The console displaying:
Uncaught ReferenceError: $ is not defined
at username:128
django version= 3.0.6
python version= 3.7.6
and the latest version of django-private-messaging
It's my first time implementing a chat app so I hope I'm not missing anything fundamental. Have a nice day!
base.html:
<!DOCTYPE html>
{% load static %}
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/dropdown.css' %}">
<link rel="stylesheet" href="{% static 'css/intro.css' %}">
<link rel="icon" type="image/ico" href="{% static 'icons\favicon.ico' %}"/>
<title>Document</title>
</head>
<body>
<div class="overlay2" id="overlay2">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar>login</a>
<a href="/user/register" class=mantar>register</a>
<button class=button-geri onclick="close('overlay2') ">geri</button>
</div>
</div>
<div class="overlay" id="overlay">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar>enter</a>
<a href="/user/register" class=mantar>register</a>
<button class=button-geri onclick="kapat('overlay') ">back</button>
</div>
</div>
<div class="overlay4" id="overlay4">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar></a>
<a href="/user/register" class=mantar></a>
<button class=button-geri onclick="kapat('overlay4') "></button>
</div>
</div>
<div class="overlay5" id="overlay5">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h3></h3>
<a href="/user/loginUser" class=mantar></a>
<a href="/user/register" class=mantar></a>
<button class=button-geri onclick="kapat('overlay5') "></button>
</div>
</div>
<div class="overlay3" id="overlay3">
<div id=fullscrean2>
<img class=virus3 src="{% static 'icons\delete.png' %}"
alt="sil"></button>
<h4></h3>
<button class=button-cancel onclick="kapat('overlay3')">vazgeç</button>
<button class=button-doit id=doit>sil</button>
</div>
</div>
<div class="overlay6" id="overlay6">
<div id=fullscrean3>
<div class=scrollable-div id=scrollable-div>
{% for i in page_list %}
{% if i == entries2.number %}
<a class=scroll-select id=exception2 href="?page={{i}}"><span id=exception>{{i}}</span></a>
{% else %}
<a class=scroll-select href="?page={{i}}">{{i}}</a>
{% endif %}
{% endfor %}
</div>
{% if entries2.has_previous or entries.has_previous %}
<button class=button-prevp>önceki</button>
{% endif %}
{% if entries2.has_next or entries.has_next %}
<button class=button-nextp>sonraki</button>
{% endif %}
</div>
</div>
<div class="overlay7" id="overlay7">
<div id=fullscrean2>
<img class=virus3 src="{% static 'icons\delete.png' %}"
alt="sil"></button>
<h4>etiketin silinsin mi?</h3>
<button class=button-cancel onclick="kapat('overlay7')">vazgeç</button>
<button class=button-doit id=doit2>sil</button>
</div>
</div>
<div class=line></div>
<header>
<div class="header-top">
<div class=logo-holder>
<img class=virus src="{% static 'icons\virus-new-color.png' %}" alt="virus">
</div>
<div class=search-holder>
<input class=search type="text" placeholder="search it..." />
<button type="submit" class=search-button><img src="{% static 'icons\icons8_search.png' %}"
alt="search"></button>
</div>
</div>
<nav>
<div class=mobile-only>
<ul class=navul>
<li>
<b></b>
</li>
<li>
<b></b>
</li>
{% if request.user.is_authenticated %}
<li>
<b></b>
</li>
<li>
</li>
<li>
<b></b>
</li>
{% else %}
<li>
<b></b>
</li>
<li>
<b></b>
</li>
{% endif %}
</ul>
</div>
</nav>
</header>
<div class=line2></div>
<main id=main>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li {% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block extra_js %}{% endblock extra_js %}
{% block body %}
{% endblock body %}
</main>
</body>
<script src="{% static 'js/jquery.mini.js' %}"></script>
<script src="{% static 'js/dropdown.js' %}"></script>
<script>
setTimeout(function(){
var message_ele = document.getElementsByClassName("messages")[0];
message_ele.style.visibility = 'hidden';
message_ele.style.opacity = 0;
message_ele.style.transition= "visibility 0s 2s, opacity 2s linear";
}, 2000);
setTimeout(function(){
var message_ele = document.getElementsByClassName("errorlist")[0];
message_ele.style.visibility = 'hidden';
message_ele.style.opacity = 0;
message_ele.style.transition= "visibility 0s 2s, opacity 2s linear";
}, 2000);
function kapat(id){
var geri=document.getElementById(id);
geri.style.display="none";
$('body').css('overflow', 'scroll');
}
$("#overlay6").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay6").css("display","none")
$('body').css('overflow', 'scroll');
});
$("#overlay3").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay3").css("display","none")
$('body').css('overflow', 'scroll');
});
$("#overlay7").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay7").css("display","none")
$('body').css('overflow', 'scroll');
});
</script>
{% block javascript %}{% endblock %}
</html>
Related
I run into a problem without understanding where it could come from.
I have the same website in Django 3.0.8 under environment which works on one side on a PC with windows 10:
On the other side, on an old PC with Xubuntu 20.04:
Everything is the same: code, files, environments, version of python (3.8). However, the Xubuntu version doesn't perform well as you can see.
Do you have any idea what could be blocking? I have the impression that Bootstrap and FontAwesomeIcon are not working correctly.
.
EDIT : This is the code of the page.html
{% load i18n %}
{% load static %}
{% load bootstrap5 %}
{% get_current_language as language_code %}
<!DOCTYPE html>
<html lang="{{ language_code }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Une vie électrique sans barrière.">
<meta name="author" content="Pierre TREMELO">
<link rel="icon" href="{% static 'favicon.ico' %}">
<title>ElyanDeal</title>
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
<!-- CUSTOMING -->
<link href="{% static 'css/fontawesome.css' %}" rel="stylesheet">
</head>
<body>
<img src="{% static 'accounts/fond_accueil.jpg' %}" class="superbg" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark static-top">
<a class="navbar-brand" href="/">
<i class="fas fa-home"></i> {% trans 'Home' %}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
{% if request.user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% trans 'Mon compte' %}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'accounts:change_profile' %}?next={{ request.path }}">
{% trans 'Profil' %}
</a>
<a class="dropdown-item" href="{% url 'accounts:change_password' %}">
{% trans 'Mot de passe' %}
</a>
<a class="dropdown-item" href="{% url 'accounts:change_email' %}">
{% trans 'Email' %}
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'accounts:log_out' %}">
{% trans 'Déconnexion' %}
</a>
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:log_in' %}">{% trans 'Connexion' %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:sign_up' %}">{% trans 'Créer un compte' %}</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'change_language' %}">{{ language_code|upper }}</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-3">
{% bootstrap_messages %}
{% block content %}
No content.
{% endblock %}
</div>
<script src="{% static 'vendor/jquery/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'vendor/popper/popper.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>
</body>
</html>
And this one for the content of the {% block content %} :
{% extends 'layouts/default/page.html' %}
{% load i18n %}
{% load static %}
{% load bootstrap5 %}
{% block content %}
<div class="center-etroit" style="background-color:transparent; max-width:500px;">
<div class="card">
<div class="card-header">
<h4>{% trans 'Connexion' %}</h4>
</div>
<div class="card-body">
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button class="btn btn-primary">{% trans 'Connexion' %}</button>
</form>
<hr>
<ul>
<li>
{% trans 'Mot de passe oublié ?' %}
</li>
<li>
{% trans 'Identifiant oublié ?' %}
</li>
<li>
{% trans "Renvoyer le code d'activation" %}
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
I ended up finding the issu! I had installed 'django-fontawesome-5' instead of 'fontawesome-free' in my virtual environment. Now that I have reinstalled the correct package, the appearance is fixed!
this is how my base.html looks like,everything was working fine until i did some changes adding jquery
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type ="text/css" href="{% static 'pmmvyapp/main.css' %}">
<link href="{% static 'js/jquery.js' %}" rel="stylesheet">
{% if title %}
<title> PMMVY-{{ title }}</title>
{% else %}
<title>PMMVY</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4"><img src="{% static 'images/left-logo.png' %}" width="83" height="89" class='d-inline-block' alt=""/>
<span style="color:white"> Ministry of Women & Child Development | GoI</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
{% if user.is_authenticated %}
<a class="btn btn-primary mr-4" href="{% url 'aganwadi' %}">Aganwadi</a>
<a class="btn btn-primary mr-4" href="{% url 'applyonline' %}">Apply online</a>
{% else %}
<div class="navbar-nav mr-auto">
<a class="navbar-brand mr-4"><img src="{% static 'images/emblem-dark.png' %}" width="60" height="80" class='d-inline-block' alt=""/> <span style="color:white" >Pradhan Mantri Matru Vandana Yojana</span> </a>
</div>
{% endif %}
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<div class="navbar-nav mr-auto">
<a class="btn btn-primary mr-4" href="{% url 'admin:index' %}"> Admin site </a>
<a class="btn btn-primary mr-4" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav mr-auto">
<a class="navbar-brand mr-4" href="{% url 'login' %}"><img src="{% static 'images/pm.png' %}" width="65" height="70" class='d-inline-block' alt=""/> <span class="btn btn-primary" style="color:black mr-4" >Login</span> </a>
</div>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<!--mainsec-->
<main role="main" class="container">
<div>
{% if messages %}
{% for message in messages%}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
<div class="row">
{% block content %}{% endblock %}
</div>
</main>
<!--end mainsec-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{% static 'js/custom.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
this is how my applyonline.html looks like
<body ng-app="">
{% extends "pmmvyapp/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content%}
<div class="col-md-8">
<form method="post" action="/personal_detail/" enctype="multipart/form-data">
<div class="group">
<div class="hide" id="q1">
</div>
</div>
</div>
<div class="hide" id="q2">two</div>
<div class="hide" id="q3">three</div>
<div class="hide" id="q4">four</div>
</div>
<div style="margin-bottom:10px ">
<button id="next">Next</button> <button id="prev">Previous</button>
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom:10px ">Submit</button>
</form>
</div>
<style>
.hide
{
display : none;
}
</style>
{% endblock %}
</body>
my settings.py
INSTALLED_APPS = [
'jquery',
'captcha',
'users.apps.UsersConfig',
'pmmvyapp.apps.PmmvyappConfig',
'crispy_forms',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
my models.py where I am returning either of the one names
class Personal_Detail(models.Model):
beneficiary_adhaar_name=models.TextField(blank=True, null=True)
adhaarno=models.IntegerField(blank=True, null=True)
adhaarcopy = models.FileField(upload_to='adhaar/')
idcard=models.TextField(blank=True, null=True)
adhaar_eid=models.IntegerField(blank=True,null=True)
beneficiary_id_name=models.TextField(blank=True, null=True)
idno=models.IntegerField(blank=True, null=True)
idcopy=models.FileField(upload_to='identitycard/')
def __str__(self):
return self.beneficiary_adhaar_name or self.beneficiary_id_name
my views.py
#login_required
def ApplyOnline(request):
return render(request,'users/applyonline.html')
#login_required
def personal_detail(request):
# ShowHideExample = request.POST.get('showHideExample',False)
beneficiary_adhaar_name=request.POST.get('beneficiary_adhaar_name')
adhaarno=request.POST.get('adhaarno')
adhaarcopy = request.FILES.get('adhaarcopy')
idcard=request.POST.get('idcard')
adhaar_eid=request.POST.get('adhaar_eid')
beneficiary_id_name=request.POST.get('beneficiary_id_name')
idno=request.POST.get('idno')
idcopy = request.FILES.get('idcopy')
apply_online = Personal_Detail(beneficiary_adhaar_name=beneficiary_adhaar_name,adhaarno=adhaarno,adhaarcopy=adhaarcopy,
idcard=idcard,adhaar_eid=adhaar_eid,beneficiary_id_name=beneficiary_id_name,idno=idno,idcopy=idcopy)
apply_online.save()
return render(request,'users/applyonline.html')
I don't know the problem that is causing this it was working fine when suddenly i did some changes with query to create a multi step form and when checked the database I was getting some null entries and when i clicked or tried to delete them I got error.I've included the image of null entries i was getting.
Basically your Model's __str__ method is returning None. Means both of the field's value is None. You need to return a string value from that method. For example:
class Personal_Detail(models.Model):
# rest of the code
def __str__(self):
return self.beneficiary_adhaar_name or self.beneficiary_id_name or str(self.pk)
I have problem with Div refreshing. idk where is my problme. and its says the problem is Not Found: /chat/(?P5\d+)/(?Pchatsnr1[\w-]+)/chat.html
And this is my code for it
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}kobby chat {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<Link rel="stylesheet" href="{% static 'chat/style.css'%}">
</head>
<body>
{% include 'chat/navbar.html' %}
<div id="refresh" class="container-fluid">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript">
$(document).ready(function(event){
$("#text").emojioneArea({
pickerPosition:"bottom "
})
$('#auto').load('chat.html');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#auto').fadeOut('slow').load('chat.html').fadeIn('slow');
refresh();
}, 5000);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
and next part for this
{% extends 'chat/base.html' %}
{% block title %}{{post.title}} | {{block.super}}{% endblock %}
{% block content %}
<h3>
{{post.title}}
</h3>
<small>Chat created by Kobby</small>
<p>{{post.body}}</p>
<form method="post">
{% csrf_token %}
<textarea id="text" name="content" cols="40" rows="10" maxlength="160" required="" id="id_content" style="margin-top: 0px; margin-bottom: 0px; height: 35px;"></textarea>
{% if request.user.is_authenticated %}
<input type="submit" value="Sumbit" class="btn btn-outline-success" />
{% else %}
<input type="submit" value="Sumbit" class="btn btn-outline-success" disabled/>
{% endif %}
</form>
<div id="auto" class="main-comment-section">
{% include 'chat/chat.html' %}
</div>
{% endblock %}
Then finnaly
{{comments.count}} Chat message{{comments|pluralize}}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{comment.content}}</p>
{% if comment.user.is_staff %}
<footer class="blockquote-footer">by <cite title="Source Title" style="color:red;">{{comment.user|capfirst}}</cite></footer>
{% else %}
<footer class="blockquote-footer">by <cite title="Source Title">{{comment.user|capfirst}}</cite></footer>
{% endif %}
</blockquote>
{% endfor %}
I think i have problem in urls like .load() method i was trying diffrent urls but same result . Maybe i need some other methof for refreshing html code
When I tried to add styles to the Django project, they do not work in Chrome, but work in Opera. CSS are very simple, for example, margin-top should be supported by any Chrome:
https://www.w3schools.com/cssref/pr_margin-top.asp
But Chrome does not see it, unlike the Opera. Tell me, please, what could be the problem?
I took this project as a basis:
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page
In locallibrary\catalog\static\css\styles.css I have following code:
.sidebar-nav {
margin-top: 30px;
background-color: #87CEEB;
padding: 0;
list-style: none;
}
.container-fluid {
margin-top: 10px;
background-color: skyblue;
padding: 0;
list-style: none;
}
In locallibrary\catalog\templates\base_generic.html:
<!DOCTYPE html>
<head>
{% block title %}<title>Test</title>{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<div class="sidebar-nav">
{% if user.is_authenticated %}
<li>User: {{ user.get_username }}</li>
<li>Logout</li>
{% else %}
<li>Login</li>
{% endif %}
<hr>
<li>Home</li>
<li>All books</li>
<li>All authors</li>
<hr>
<li>Всі відрядження</li>
<li>Мої відрядження</li>
<li><a href="{% url 'trip_new' %}" class="top-menu"> Подати заявку на відрядження
<span class="glyphicon glyphicon-plus"></span></a></li>
<li> Пошук відряджень <span class="glyphicon glyphicon-plus"></span></li>
<li>Всі відрядження2</li>
<hr>
<li>Create author</li>
<li>Share this post</li>
<li>Export all users</li>
<li>attachment email</li>
<li>My Borrowed</li>
</div>
{% endblock %}
</div>
<div class="col-sm-10 ">
{% block content %}{% endblock %}
{% block pagination %}
{% if is_paginated %}
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
{% endif %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
In locallibrary\locallibrary\settings.py:
STATIC_URL = '/static/'
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 %}
It's a character at the top of your body
Solution found. Delete login.html and recreate it. There's must be an invisible character that i can't see somehow!