Hello I am developing a django cms for my company but running into issues with the navbar in IE8.
using:
-Python 2.7.6
-Django (1, 7, 8, 'final', 0)
-django-cms 3.1.0
-boostrap 3.3.4
here is my template
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% render_block "css" %}
</head>
<body style="padding-top:60px">
{% cms_toolbar %}
<div class="container">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 100 100 "menu.html" %}
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
{% render_block "js" %}
</body>
</html>
The issue is the navbar is always collapsed regardless of the screen size
I have already had the navbar working in IE + Bootstrap and that template is like so:
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'core:home' %}">
{% load staticfiles %}
<img alt='Bell logo' src="{% static 'core/images/bell_logo.png' %}">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Liens</li>
<li>Tools</li>
<li>Doc</li>
<li>Wiki</li>
<li>Project</li>
<li>CAB</li>
<li>DB</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
I tried adapting my django cms template so it would look like the one I originally had, but no success. What am I doing wrong?
Had to add respond.js to page, but i thought the cms and django would take care of that
Related
The django 'extends' template is not loading the content. In this I am trying to extend index.html to homepage.html. Both the files are under the same templates directory. The code snippets are shown below:
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tashi eComm</title>
<!-- adding title icon -->
<link rel = "icon" href ="{% static 'images/TecommLogo.png' %}" type = "image/x-icon">
<!-- Bootstrap 5 link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Bootstrap 5 popper and javascript link -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<!--Bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href="{% static 'css/stylesheet.css' %}"/>
</head>
<body>
<div class="wrapper">
<div class="panel panel-default">
<div class="panel-heading">
<div class="d-flex justify-content-end ">
<div class="top-header m-2 ">
Marketplace
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Buyer Protection
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Track Order
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
<div class="form-group">
<select id="demo_overview_minimal" class="select-picker" data-role="select-dropdown" data-profile="minimal">
<!-- options -->
<option>BTN</option>
<option>USD</option>
<option>EUR</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel-body">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand ms-5" href="#"><img src="{% static 'images/TecommLogo.png' %}" alt="Logo" height="60px" width="60px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop by Category
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex Search col-5">
<input class="form-control me-auto col-8" type="search" placeholder="Search for anything" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
{% block content %}
{% endblock content%}
<footer>
<div class="panel panel-default">
<div class="panel-footer bg-light ">
<div class="row ms-5 me-5">
<div class="col-sm-3">
<div class="row">
<h3>Policies</h3>
</div>
<div class="row">
Privacy Policies
</div>
<div class="row">
Refund Policies
</div>
<div class="row">
Terms & Conditions
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Vendor</h3>
</div>
<div class="row">
Start Selling
</div>
<div class="row">
Learn to Sell
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Connect With Us</h3>
</div>
<div class="row">
<i class="bi bi-facebook"></i>Facebook
</div>
<div class="row">
<i class="bi bi-twitter"></i>Twiiter
</div>
<div class="row">
<i class="bi bi-instagram"></i>Instagram
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Help & Contact</h3>
</div>
<div class="row">
Contact
</div>
<div class="row">
About Us
</div>
<div class="row">
FAQs
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
homepage.html
{% extends 'index.html' %}
{% block content %}
Hello! this is my block content
{% endblock content %}
urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.urls import path, include
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.homepage, name="homepage"),
# path('accounts/', include('accounts.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
views.py
from django.shortcuts import render
def homepage(request):
return render(request, 'index.html')
I have done the similar projects earlier but it was working fine. I don't know why it doesn't work in this project while i have done everything similar
I have been trying this for a whole day. Any help will be appreciated.
You want to extend index.html to homepage.html so you have to call homepage.html in your views.py file.
from django.shortcuts import render
def homepage(request):
return render(request, 'homepage.html')
I have an error in my template. I have tried to see where I've gone wrong, but couldn't identify the bug.
This is index.1.html:
{% extends 'clinic/clinicbase.html' %}
{% load static %}
{% block content %}
{% if username %}
<div class="jumbotron">
<div class="container">
<h3>Welcome, Dr {{ name }}</h3>
<p>You can manage your clinics here:</p>
<p><a class="btn btn-primary btn-sm" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
{% if nodoc}
{% if clinics %}
{% for clinic in clinics %}
<div class="col-sm-8 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="card-body">
<div id="id" style="display: none;">{{ clinic.clinicid }} </div>
<h2 class="card-title">
{{ clinic.name}}
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Label: {{ clinic.label }}</h6>
<p class="card-text">Phone: {{ clinic.mobile }}</p>
<p class="card-text">About Clinic: {{ clinic.about }}</p>
<p class="card-text">Website: {{ clinic.website }}</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/doctor/edit/{{ doc.docid }}" class="btn btn-primary mr-1 mybtndocedit" data-id="{{ doc.docid }}">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/doctor/appointments/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnviewapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/doctor/appointment/add/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnaddapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/doctor/remove/{{ doc.docid }}" class="btn btn-danger mr-1 mybtndel" data-id="{{ doc.docid }}">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not a member of any clinic. If you are an administrator, you can add yourself to a clinic here.
</div>
{% endif %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not registered as a doctor in the system. Please contact Support..
</div>
{% endif %}
{% else %}
<div class="container bg-light">
<p>You are not authorized. Please login.</p>
{% endif %}
</div>
{% endblock %}
This is clinic/clinicbase.html:
{% 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">
{% include "clinic/common_css.html" %}
{% block cssblock %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id="navbar">
{% block navbar %}
{% include "clinic/topbar.html" with screen="newappointment" %}
{% endblock %}
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
{% block breadcrumb %}{% endblock %}
</ol>
</nav>
{% block content %}
{% endblock %}
{% include "clinic/common_js.html" %}
{% block jsblock %}
{% endblock %}
</body>
</html>
clinic/topbar.html:
<header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="/"><i class="fas fa-plus"></i> Mysite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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">
<i class="fas fa-user-md"></i> Clinic
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/"><i class="fas fa-car"></i> Waiting Patients</a>
<a class="dropdown-item" href="/clinic/seen" id="BtnPatientsSeen"><i class="fas fa-check-square"></i>
Seen Patients</a>
<a class="dropdown-item" href="/clinic/newclinic" id="AddNewClinic"><i class="fas fa-check-square"></i>
Add new clinic</a>
<a class="dropdown-item" href="/clinic/clinics" id="ListClinics"><i class="fas fa-check-square"></i>
Show Clinics</a>
<a class="dropdown-item" href="/clinic/permissions" id="SetPermissions"><i class="fas fa-check-square"></i>
Set mapping and permissions</a>
</div>
</li>
<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">
<i class="fas fa-address-book"></i> Registration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/register" id="registration"><i class="fas fa-clipboard"></i>
Register Patient</a>
<a class="dropdown-item" href="/clinic/checkin"><i class="fas fa-clipboard-check"></i> Checkin Patient</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="listRegistered" href="#"><i class="fas fa-list"></i> List Registered
Patients</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment" id="appointment"><i class="fas fa-calendar-plus"></i> Appointments
</a>
</li>
{% if 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">
Welcome, {{ user.get_username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'logout'%}?next={{request.path}}"><i class="fas fa-sign-out-alt"></i>
Logout</a>
<a class="dropdown-item" href="/clinic/myprofile"><i class="fas fa-user-alt"></i> My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments"><i class="fas fa-calendar"></i> My Appointments</a>
</div>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-key"></i> Login
</a>
</li>
{% endif %}
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
clinic/common_css.html:
{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'clinic/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/datepicker.0.6.5.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fontawesome.5.2.0.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.structure.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.theme.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fullcalendar.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/calcustomcolors.css' %}?dev={{ rnd_num }}">
<link rel="stylesheet" href="{% static 'appointments/propellor/typography.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/materialicons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/floating-action-button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/google-icons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/mytheme.css' %}">
clinic/common_js.html:
{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'appointments/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'appointments/js/jquery-ui/jquery-ui.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/popper.min.js' %}"></script>
<script src="{% static 'appointments/js/bootstrap.min.js' %}"></script>
<script src="{% static 'appointments/js/notify.0.4.2.js' %}"></script>
<script src="{% static 'appointments/js/datepicker.0.6.5.js' %}"></script>
<script src="{% static 'appointments/lib/moment.min.js' %}"></script>
<script src="{% static 'appointments/js/fullcalendar.js' %}"></script>
<script src="{% static 'appointments/js/search.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/appointment.js' %}?dev={{ rnd_num }}"></script>
The error I get is:
In template /home/joel/myappointments/appointments/templates/clinic/index.1.html, error at line 60
Invalid block tag on line 60: 'else', expected 'endblock'. Did you forget to register or load this tag?
Is there an obvious bug in the template?
{% if nodoc} on line 12 - you're missing a %, this line should be {% if nodoc %}.
i have been working on my image upload portion of my web app and developing it using Django.My Image Upload functionality working absolutely fine.No problem with that.
But in my image upload page i am getting unnecessary alert message at a time such as "You have been singed in","You have been signed out" after making a sign in and sign out and this alert message is appearing after entering in my image uplaod page,which is weired!.
Yeah i have set django message tag in my Image upload template to show alert message if user make any image upload action.But i don't want to get any alert message such as "You have been signed in" or "You have been signed out" or something irrelevant in my image upload page after entering in my image upload page to upload an image.But unfortunately its happening and after making lot's of googling and research ,i can't figure it out.
In mention i am using django form and django message framework.
This is my view for the image upload
def UserImageUpload(request):
if request.method == 'POST':
form = DocumentForm(request.POST,request.FILES)
if form.is_valid():
newdoc = Photo(photo = request.FILES['photo'],watermarked_image=request.FILES['photo'],user = request.user,name = request.POST['name'],description = request.POST['description'],keyword = request.POST['Image_Keyword'],uploaded_time=datetime.datetime.now(),Certified=request.POST['Certification'])
newdoc.save()
messages.success(request,'Your Image upload is waiting for Admin approval')
form = DocumentForm
else:
messages.error(request,'Please Complete All Fields or Only upload jpg file,because we are currently accepting only the jpg file!')
else:
form = DocumentForm()
uploaded_image = Photo.objects.all()
return render_to_response('myprofile/user_image_upload.html',{'uploaded_image':uploaded_image,'form':form},context_instance = RequestContext(request))
and this is Image upload form template
{% extends 'base.html'%}
{% block title%}User Image Upload {% endblock %}
{%block content%}
<div id="messages" style="margin-top:50px">
{% if messages %}
<!--<div class="row"> -->
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
<!--<p{%if message.tags=="success"%} class="alert alert-success" {%endif%}>{{message}}</p> -->
<button type="button" class="close" data-dismiss="alert"></button>
{{ message }}
</div>
{% endfor %}
<!--</div> -->
{% endif %}
</div>
<div class="container" style="margin-top:5%" ng-app="ImageUpload">
<div class="col-md-4 col-md-offset-4" ng-controller="ImagePreviewCtrl">
<div class="well" ng-show="show">
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.photo.label_tag }} {{ form.photo.help_text }}</p>
<ul class = 'unstyled'>
<li class = 'tust'>{{form.name.label}}{{ form.photo.errors }}</li>{{form.name}}<br/>
<li class = 'tust'>{{form.description.label}}{{ form.photo.errors }}</li>{{form.description}}<br/>
<li class = 'tust'>{{form.Image_Keyword.label}}{{ form.photo.errors }}</li>{{form.Image_Keyword}}<br/>
<li class = 'tust'>{{form.Certification.label}}{{ form.photo.errors }}</li>{{form.Certification}}<br/>
{{ form.photo }}
</ul>
<input type="submit" value="Upload" class="btn btn-success" />
</form>
</div>
</div>
</div>
{%endblock%}
UPDATE:
my base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title>{%block title%}Medical Art{%endblock%}</title>
<!-- TEST OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO -->
{%block css%}
<!-- Bootstrap core CSS -->
<link type = 'text/css' href="{{STATIC_URL}}photo/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!--<link type = 'text/css' href="{{STATIC_URL}}photo/css/main.css" rel="stylesheet">-->
<link type = 'text/css' href="{{STATIC_URL}}photo/css/font-awesome.min.css" rel="stylesheet">
<link type = 'text/css' href="{{STATIC_URL}}photo/css/main-profile.css" rel="stylesheet">
<link type = 'text/css' href="{{STATIC_URL}}photo/css/car.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
{%endblock%}
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="{{STATIC_URL}}photo/js/angular.min.js"></script>
</head>
<body>
<div>
{%block navi%}
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home'%}"><strong>Medical Art</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
{% if user.is_authenticated %}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Photo</li>
<li>Upload</li>
</ul>
<div class="col-sm-3 col-md-3">
<!--<form class="navbar-form navbar-left" action='/search/search_result/' method='post' role="search">-->
<form class="navbar-form" action='/search/search_result/' method='post' role="search">
<div class="input-group">
{% csrf_token %}
<input type="text" class="form-control" placeholder="Search" name="search" id='search_item'>
<div class="input-group-btn">
<button type="submit" class="btn btn-default" ><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li><span style = "color:red; padding-left:5px;"> {{user.username}}!</span></li>
<li class="dropdown">
Picture Management<b class="caret"></b>
<ul class="dropdown-menu">
<li>
Buyer
<li class="divider"></li>
<li>> My Purchased Picture</li>
<li class="divider"></li>
</li>
<li>Contributor
<li class="divider"></li>
<li>> My Pending Pictures</li>
<li class="divider"></li>
<li>> My Approved Pictures</li>
<li class="divider"></li>
<li>> My earnings</li>
</li>
<li class="divider"></li>
<li>Log-Out</li>
</ul>
</li>
<li class="dropdown">
Account Mangement<b class="caret"></b>
<ul class="dropdown-menu">
<li>My Profile</li>
<li>Edit profile</li>
<li>Change password</li>
<li>Change email</li>
<li class="divider"></li>
<li>Log-Out</li>
</ul>
</li>
</ul>
</div>
{%else%}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<div class="col-sm-3 col-md-3">
</div>
<ul class="nav navbar-nav navbar-right">
<li>Sign In</li>
<li>Sign Up</span></li>
</ul>
</div>
{% endif %}<!-- /.navbar-collapse -->
</nav>
{%endblock%}
</div>
<div>{% block content%}
<div class="endless_page_template">
{% include 'photo/endless.html' %}
</div>
{% endblock%}
</div>
<br>
{%block footer%}
<div class="footer navbar-fixed-bottom" style="background-color:black; text-align:center">
<h4 style = "color:#ffffff">Powered by- Medical Art - Copyright 2014</h4>
</div>
{%block js%}
<script src="{{STATIC_URL}}photo/js/modernizr.custom.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{STATIC_URL}}photo/js/bootstrap.min.js"></script>
<script src="{{STATIC_URL}}photo/js/main.js"></script>
<script src="{{STATIC_URL}}photo/js/masonry.pkgd.min.js"></script>
<script src="{{STATIC_URL}}photo/js/imagesloaded.js"></script>
<script src="{{STATIC_URL}}photo/js/imageupload.js"></script>
<script src="{{STATIC_URL}}photo/js/classie.js"></script>
<script src="{{STATIC_URL}}photo/js/AnimOnScroll.js"></script>
<script src="{{STATIC_URL}}photo/js/jquery.cookie.js"></script>
<script src="{{STATIC_URL}}photo/js/endless.js" type="text/javascript" charset="utf-8"> </script>
<script>$.endlessPaginate({paginateOnScroll: true,paginateOnScrollMargin: 20});</script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$(document).ready(function() {
//Events that reset and restart the timer animation when the slides change
$("#transition-timer-carousel").on("slide.bs.carousel", function(event) {
//The animate class gets removed so that it jumps straight back to 0%
$(".transition-timer-carousel-progress-bar", this)
.removeClass("animate").css("width", "0%");
}).on("slid.bs.carousel", function(event) {
//The slide transition finished, so re-add the animate class so that
//the timer bar takes time to fill up
$(".transition-timer-carousel-progress-bar", this)
.addClass("animate").css("width", "100%");
});
//Kick off the initial slide animation when the document is ready
$(".transition-timer-carousel-progress-bar", "#transition-timer-carousel")
.css("width", "100%");
});
</script>
{%endblock%}
{%endblock%}
</body>
</html>
My guess is that your messages are piling up until you enter your upload page. Then they are displayed all at once.
Moving messages code to your base.html should solve this.
Edit
If you will place messages just before your content block it will solve the issue.
{% if messages %}
<div id="messages" style="margin-top:50px">
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
<button type="button" class="close" data-dismiss="alert"></button>
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
<div id="content">
{% block content%}
<div class="endless_page_template">
{% include 'photo/endless.html' %}
</div>
{% endblock%}
</div>
Edit: Adding the full versions of my base and child template.
I'm using Django 1.5.8 and have a base template (in template root) and sub folders for child templates which extend the base.
When I extend base.html all the contents of the base template show up in the body of the child template. This happens on all child pages except the index. Is there some Django template inheritance rule that I'm not aware of?
Here is my full base:
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{% load ganalytics %}
{% load twitter_tag %}
{% load compress %}
{% load tags %}
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block othermeta %}
<meta name="description" content="Welcome to Multimechanics">
<title>MultiMechanics</title>
<link rel="icon" type="image/png" href="{{ STATIC_URL }}ico/favicon.ico" />
<!--Needed for salesforce-->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
{% endblock %}
<!-- Bootstrap core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
{% compress css %}
<link href="{{ STATIC_URL }}css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/animate.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/lightbox.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
{% endcompress %}
{% ganalytics %}
{% block otherheader %}{% endblock %}
</head>
<body>
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="{{ STATIC_URL }}img/logo.png" alt="..."></a>
</div>
<div class="collapse navbar-collapse">
{% if user.is_authenticated %}
Log Out
{% else %}
Log In
{% endif %}
<ul class="nav navbar-nav navbar-right">
<li class='dropdown {% active request "^/faqs/$" %} {% active request "^/multiscale/$" %} {% active request "^/about-us/$" %}'>
About<b class="caret"></b>
<ul class="dropdown-menu">
{% if request.get_full_path == "/" %}
<li>Product Overview</li>
<li>Product Applications</li>
{% else %}
<li>Multimech Home</li>
{% endif %}
<li>MultiMech Details</li>
<li>What's Multiscale?</li>
<!--<li>Demos</li>
<li>Case Studies</li>-->
<li>Frequent Questions</li>
</ul>
</li>
<li class='dropdown {% active request "^/trueinnovation/$" %} {% active request "^/portfolio/$" %}'>
Showcases <b class="caret"></b>
<ul class="dropdown-menu">
{% if request.get_full_path == "/" %}
<li>Featured Demos</li>
{% endif %}
<li>Demo Gallery</li>
<li>Blog</li>
</ul>
</li>
<li class='dropdown {% active request "^/careers/$" %} {% active request "^/contact-us/$" %} {% active request "^/login/$" %} {% active request "^/help/$" %} {% active request "^/register/$" %} {% active request "^/thanks/$" %}'>
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Contact Us</li>
<li>Careers</li>
<li>Help</li>
<li>User Login</li>
</ul>
</li>
{% if request.get_full_path != "/" %}
<li class="dropdown">
Contact
</li>
{% else %}
<li class="dropdown">
Contact
</li>
{% endif %}
<!-- Navbar Search -->
<li class="hidden-xs" id="navbar-search">
<a href="#">
<i class="fa fa-search"></i>
</a>
<div class="hidden" id="navbar-search-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</li>
</ul>
<!-- Mobile Search -->
<form class="navbar-form navbar-right visible-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-red" type="button">Search!</button>
</span>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- / .navigation -->
{% block content %}
{% endblock %}
<!-- footer
================================================== -->
<footer>
<div class="container">
<div class="row">
<!-- Contact Us -->
<div class="col-sm-4">
<h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
<p>Do not hesitate to contact us if you have any questions or feature requests:</p>
<p>
Omaha, NE 68154<br />
14301 FNB Parkway, Suite 100<br />
Phone: +1 402 957 1336<br />
Email: sales#multimechrd.com
</p>
</div>
<!-- Recent Tweets -->
{% load twitter_tag cache %}
{% cache 60 my_tweets %}
{% get_tweets for "multimechanics" as tweets limit 2 %}
<div class="col-sm-4">
<h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
{% for tweet in tweets %}
<div class="tweet">
<i class="fa fa-twitter fa-2x"></i>
<p>
{{ tweet.html|safe }}
</p>
</div>
{% endfor %}
</div>
{% endcache %}
<!-- Newsletter -->
<div class="col-sm-4">
<h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
<p>
Enter your e-mail below to subscribe to our free newsletter.
<br>
We promise not to bother you often!
</p>
<!--<form class="form" role="form" method="post" action="/newsletter{{ request.get_full_path }}">-->
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00Di0000000fkHM">
<input type=hidden name="retURL" value="http://multimech2.azurewebsites.net/thanks/newsletter">
<input type=hidden name="lead_source" id="lead_source" value="Web">
<input type=hidden name="city" id="city" value="{{ip}}">
{% csrf_token %}
<div class="row">
<div class="col-sm-8">
<div class="input-group">
<label class="sr-only" for="subscribe-email">Email address</label>
<!--<input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">-->
<div class="fieldWrapper">{{ newsletter_form.email }}</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-default" name="newsletter_form">OK</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</footer>
<!-- Copyright -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="copyright">
Copyright 2014 - MultiMechanics, LLC | All Rights Reserved
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{% compress js %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/scrolltopcontrol.js"></script>
<script src="{{ STATIC_URL }}js/lightbox-2.6.min.js"></script>
<script src="{{ STATIC_URL }}js/custom.js"></script>
{% endcompress %}
{% block otherfooter %}{% endblock %}
</body>
</html>
Here is my full child:
{% extends "base.html" %}
{% block content %}
<!-- Wrapper -->
<div class="wrapper">
<!-- Topic Header -->
<div class="topic">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Sign In</h3>
</div>
<div class="col-sm-8">
<ol class="breadcrumb pull-right hidden-xs">
<li>Home</li>
<li class="active">Log In</li>
</ol>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="sign-form">
<div class="sign-inner">
<h3 class="first-child">Log In To Your Account</h3>
<hr>
<form role="form" action="" method="post">
{% csrf_token %}
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
{{form.username}}
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
{{form.password}}
</div>
<div class="checkbox">
<!--<label>
<input type="checkbox"> Remember me
</label>-->
</div>
<button type="submit" class="btn btn-red" name="login_form">Submit</button>
<hr>
</form>
<p>Not registered? Create an Account.</p>
<div class="pwd-lost">
<div class="pwd-lost-q show">Lost your password? Click here to recover.</div>
<!--https://github.com/brutasse/django-password-reset-->
<div class="pwd-lost-f hidden">
<p class="text-muted">Enter your email address below and we will send you a link to reset your password.</p>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email-pwd">Email address</label>
<input type="email" class="form-control" id="email-pwd" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-blue">Send</button>
</form>
</div>
</div> <!-- / .pwd-lost -->
</div>
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
</div> <!-- / .wrapper -->
{% endblock %}
Here is how the html is rendered:
<html lang="en">
<head>
<style type="text/css"></style>
</head>
<body style="">
<!-- base.html -->
<!--[if lt IE 8 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!-->
<!--<![endif]-->
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/static/img/logo.png" alt="..."></a>
</div>
<div c
Here is how I render that page (but I use "render_to_response" for other templates and get the same result:
url(r'^about-us/', TemplateView.as_view(template_name="about-us.html"), name='about-us'),
Thanks in advance for the help.
I had similar problem.
Changing encoding of my files to "utf-8 without BOM" solved my issue.
(http://validator.w3.org/ may help u.)
Are you sure you're editing the correct "base.html" file? It appears that you may be editing a file that has the same name, but is in a different location. Also, are you using Javascript or something to populate your <navigation> </navigation> ? The rendered result does not match your base.html. If you are generating this navigation section using Javascript, this could be your culprit. If it was redacted for readability, then I would search for another instance of "base.html" or "about-us.html" in your project folder. You may find that you are editing the wrong file. Can you post the complete files "base.html" and "about-us.html" and the entire response?
Edit: I believe the issue may be in your "othermeta" block. You can see that the following lines render correctly:
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the point in your result that gets messy. It is also the point in your base when you call for {% block othermeta %}. Is there a reason you have that block with content inside? I'm not sure it is accepting the {% endblock %} correctly. If you want the block othermeta to be dynamic, you must have it in its own othermeta.html, which extends base.html as well. Then, you would change your code to simply:
{% block othermeta %} {% endblock %}
I think the error may be that you're trying to define the contents of this block in an extended template. I'm new at this like you, so I could be completely wrong, but try removing your othermeta block entirely for now and see if it helps.
Hope this helps!
After having the same issue in 2019, this was, as Majid Mobini said, due to the encoding of the source files by Visual Studio. As VS 2019 no longer has the Advanced Save options, my solution was to install the Fix File Encoding extension from the VS Marketplace and resave my files - which then placed the meta in the HEAD as expected.
Do you know how to force django bootstrap toolkit to be responsive? I mean e.g the change of navbar when width is small.
I have in base.html:
{% bootstrap_stylesheet_tag %}
{% bootstrap_stylesheet_tag "responsive" %}
what is "translated" to when checked in view source of page:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
full base.html content here: https://gist.github.com/andilab/785133e800f023c89689
example rendered # jsfiddle here: http://jsfiddle.net/andilab/4Jqab/
Find here the updated jsfiddle http://jsfiddle.net/4Jqab/1/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://dogspot.dyndns.org/static/lapa_icon.png">dogspot</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Dogs</li>
<li>Form</li>
<li class="dropdown">
Forms<b class="caret"></b>
<ul class="dropdown-menu">
<li>create</li>
<li>contact</li>
<li>Inline</li>
<li>Search</li>
<li>Using template</li>
</ul>
<li>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form></li>
<li>create</li>
<li>contact</li>
<li>Pagination</li>
<li>Buttons</li>
</ul>
</div>
</div>
</div>
</div>
A couple of things were missed:
A fluid container for the nav
You need to specify the collapsible part of the navbar
A navbar toggle button
See http://getbootstrap.com/2.3.2/components.html#navbar