I would like to add a simple navbar to my site using django-bootstrap3. The base.html document I am editing to create the navbar works with Twitter Bootstrap but does not with django-bootstrap3. The issue I am having is the button that is supposed to toggle the drop-down does not do anything when clicked. Has anyone encountered this problem before?
Here is 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">
<title>{% block title %}{% endblock title %}</title>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<style>
body {
padding-top: 70px;
}
</style>
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!------Navbar ---------->
<header class = "navbar navbar-inverse navbar-fixed-top" role = "banner">
<div class = "container">
<div class ="navbar-header">
<button type = "button" class= "navbar-toggle" data-toggle = "collapse" data-target = "#dropdown">
<span class = "sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project Name
</div><!-- End Navbar Header-->
<div class = "collapse navbar-collapse" id = "dropdown">
<ul class = "nav navbar-nav navbar-right" role = "navigation">
<li>Home</li>
<li>New Page</li>
<li>New Page</li>
<li>New Page</li>
</ul>
</div><!-- End Nav Contents -->
</div><!-- End Container -->
</header>
The issue was that django-bootstrap3's javascript needs jquery installed (I had wrongfully assumed django-bootstrap3 did this automatically). As soon as I referenced jquery the problem was fixed immediately.
I know this topic is 2 years old but in case for everyone having the same issue in the futur, here the solution: in your template, replace:
{% bootstrap_javascript %}
By:
{% bootstrap_javascript jquery=1 %}
Related
Here is 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">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{{ url_for('dashboard') }}">SOM</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
</body>
</html>
profile.html:
{% extends "base.html" %}
<h3>{{user.username}}</h3>
When I go to the profile page it doesn't display the username but if I type something else there like <h1> Hello </h1> I can see it.
If you try
{% extends "base.html" %}
<h3>Hello, {{ user.username }}</h3>
and all you see is "Hello", your next step is to verify that you're passing a user key to render_template, and that the value has a non-blank username field.
Then take another look at the extends documentation, and note the part about overriding blocks.
I am using Bootstrap 3.3.2 with Django 1.8.8 to build my website. I am using mod-wsgi version 4.4.23 and Apache 2.2.15 to deploy this on a CentOS VM.
I have a navbar fixed to the top, with a collapsible Signup menu. When I connect to the website over http and click on the menu, the dropdown menu items are listed. But when I connect over https and do the same, the dropdown menu items are not displayed. The same thing happens when I click on minimized navbar menu items when the viewport shrinks.
What could be going wrong?
The base template code is here:
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap-3.3.2-dist/css/bootstrap_cerulean.min.css' %}" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="{% static 'bootstrap-3.3.2-dist/css/custom_cerulean.css' %}" rel="stylesheet" />
<!-- Load Javascript files -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class = "navbar-brand" href="/">
<img style="width:auto; height:160%;" src="{% static "logo.jpg" %}">
</a>
{% if user.is_authenticated %}
<a class = "navbar-brand" href="{% url 'myapp:profile' %}">
<span class="glyphicon glyphicon-home"></span>
</a>
{% endif %}
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
{% if not user.is_authenticated %}
<li class="dropdown">
Sign Up
<ul class="dropdown-menu" role="menu">
<li>New Employer</li>
<li>New Employee</li>
</ul>
</li>
{% endif %}
<li>
{% if not user.is_authenticated %}
Login
{% else %}
Logout
{% endif %}
</li>
{% if user.is_authenticated %}
<li>
Change Password
</li>
<li>
MyApp
</li>
{% endif %}
</ul><!--/.navbar-left -->
<ul class="nav navbar-nav navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul><!--/.navbar-right -->
</div><!--/.navbar-collapse -->
</div><!--/.container -->
</nav>
This call to load jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" is to a http address. It's possible your browser won't load it when you go to HTTPS. That'll break all kinds of things.
Additionally you have some fonts at http:// addresses. Easiest way to fix is to prefix with // .
Right click and Inspect, in most browsers you'll see the error in the Dev Tools.
I used Django to create a blog and i want to display a single post on page when i click on a post title and no matter of the used method i cannot display anything on the page.
My Views:
class One_Per_Page(DetailView):
model = AboutMe
objects = AboutMe(id)
def oneperpage(request):
entry = One_Per_Page.objects.get_queryset(pk=AboutMe.id)
#entries = super(One_Per_Page).get_queryset()
return render_to_response('blog/aboutme_detail.html', {'AboutMe': entry})
this is the URL i use:
url(r'^(?P<pk>\d+)$', One_Per_Page.as_view(), name='oneperpage
this is the html page that must display a single post when the title of it is cliked:
<!DOCTYPE html>
<html lang="en">
<head>
<title>EBA</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="/static/css/styles.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHead">
<img src="/static/img/mainlogo.png" %} width="700" height="144" %}>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='{{ STATIC_URL }}/latestnews/'>News</a></li>
<li><a href='{{ STATIC_URL }}/archive/'>Archive</a></li>
</ul>
</nav>
</header>
{% block content %}
<div>
<article>
<h4>{{ entry.titleMe }}</h4>
<p class="postInfo">
on {{ entry.dateMe }}
</p>
<div class="typicalArticle">
{{ entry.contentMe|safe|linebreaks }}
</div>
</article>
</div>
{% endblock %}
<footer class="mainFooter">
<p> copyright © 2015</p>
</footer>
</body>
</html>
Can anyone help me to do this right?
I dont know what error you are getting but try this, actually you dont need to do much:
url(r'^stuff/(?P<pk>\d+)/', One_Per_Page.as_view(
template_name='detail.html'), name="detail")
and
class One_Per_Page(DetailView):
model = AboutMe
and in template, you have automatically object instance you can access like this:
{{ object.name }}
{{ object.biography }}
I have a base template that includes another template for a drop down menu. If I hard code items for the li tag, it works fine. If I try to pass the objects.all(), it doesn't fill. Here's my setup:
Model
class Category(models.Model):
name = models.CharField(max_length=40, blank=True)
def __unicode__(self): # Python 3: def __str__(self):
return self.name
View
def dropdown_cats(request):
cats = Category.objects.all()
return render(request, 'home/dropdown-cats.html', {'cats': cats})
home/base.html
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{% static 'media/logo.png' %}">
<title>something.com</title>
<!-- Bootstrap core CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}" type="text/css" media="screen" />
<link href="{% static 'dist/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<!-- Custom CSS -->
<link href="{% static 'dist/css/custom.css' %}" rel="stylesheet" media="screen">
<!-- 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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="site_wrapper" class="clearfix">
<!-- Above-Nav
================================================== -->
<div class="above-nav visible-desktop">
<div class="container" style="text-align:center;">
</div>
</div>
<!--END above-nav
================================================== -->
<!-- Navbar ==================================== -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<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={{home}}>something.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% block navbar %}
{% endblock navbar %}
</ul>
</div>
</div><!--/.nav-collapse -->
</div><!-- navbar-inner -->
</div>
<!-- End Navbar =================================== -->
<!-- Start Grid layout ============================ -->
<!--<div class="container-fluid">-->
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-xs-3"><h2>My Most Recent Blogs</h2>
{% block left_side %}
{% endblock left_side %}
</div>
<div class="col-xs-6">
{% block middle %}
{% endblock middle %}
</div>
<div class="col-xs-3"><h2>Links</h2>
{% block right_side %}
{% endblock right_side %}
</div>
</div>
</div>
<!-- End Grid Layout ====================== -->
</div>
<!-- close the wrapper ====================== -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{% static 'dist/js/bootstrap.min.js' %}"></script>
</body>
</html>
home/home.html
{% extends "home/base.html" %}
{% block navbar %}
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Categories<span class="caret"></span>
{% include 'home/dropdown-cats.html' %}
</li>
<li>Previous Blogs</li>
<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>
{% endblock navbar %}
{% block left_side %}
{% endblock left_side %}
{% block middle %}
{% endblock middle %}
{% block right_side %}
{% endblock right_side %}
home/dropdown-cats.html
<ul class="dropdown-menu">
{% if cats %}
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% endfor %}
{% else %}
<li>BAD TEST</li>
{% endif %}
</ul>
If I test this by replacing the url tag in the for loop with something similar like GOOD TEST, there's still nothing inserted because cats is empty. All I get is one drop down entry "BAD TEST". I've used the shell to ensure Category.objects.all() returns the list as of categories as it should.
No idea how that Post statement got in the view there. Must have accidentally pasted it it. Anyways, I've excluded it from the view and included all my html for more details. I THINK I understand what you're saying Daniel, but I'm a bit confused. Isn't this how the tutorial modifies templates, by including it in the render parameters: render(request, 'template.html', dicts)
You don't really show enough information here, but I suspect you're getting confused about templates and views. Simply including another template doesn't "call" another view: the only thing that calls views is the URL handler. Templates themselves don't know anything about views.
If you want to dynamically add context for another template, you need to make it into a custom inclusion tag.
Replace the snippet in your Template with:
<ul class="dropdown-menu">
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% empty %}
<li>BAD TEST</li>
{% endfor %}
</ul>
The above will definitely work as long as the cats queryset as set in your View code has 1 or more items. The for .. empty template tag used in the template code above is documented here.
My navbar is supposed to collapse to a select-list when the screen is resized below threshold. It works for my home page, but not for the others, i.e. on other pages besides home page, when the screen is resized until the sites collapsed, the navbar disappears completely (the select-list element that's supposed to be there is not there). I have a submenu below my navbar, and it collapses just fine. I wonder what's the problem? Could it be scripts conflict (but collapse is bootstrap css right)?
My navbar is of class navbar, with a logo of tag at the left and for the link buttons.
I use jQuery and django alongside bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!--
<link rel="stylesheet" type="text/css" href="/static/global.css">
-->
<link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->
<link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
<link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet"/>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="/static/bootstrap/js/modernizr.custom.js"></script>
<script src="/static/js/jquery-1.9.0.js"></script>
<script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
<script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="/static/highcharts-3/js/highcharts.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/superfish.js"></script>
<title>CoAssets Platform (BETA)</title>
</head>
<body>
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="topmenu">
{% block topmenu %}{% endblock %}
</div>
</div>
<div class="row-fluid" style="background-color:#ffad37">
<div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
<ul class="nav nav-pills">
{% block submenu %}{% endblock %}
<li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
<li class="pull-right">Account</li>
</ul>
</div>
</div>
<!--/div-->
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="main">
{% block main_body %}{% endblock %}
</div>
</div>
<!--/div-->
</br>
<div class="container-fluid" id="copyright">
<div class="row-fluid">
<div class="span4">
<p>Legalise</p>
<p>Contact Us</p>
</div>
<div class="span4">
<p>Partners</p>
<p>FAQ</p>
<p>Definitions</p>
</div>
<div class="span4">
<p>Admin</p>
</div>
</div>
<div class="row-fluid" id="copyright">
<div class="span12" id="footer">
<p>Copyright of CoAssets.com © 2013</p>
</div>
</div>
</div>
<script>
//script conflicts with some other jQuery scripts, so need to handle this script
jQuery.noConflict();
$(document).ready(function($){
$('.nav li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
//alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath == currentPath && !$(this).hasClass('active')) {
$(this).addClass('active');
};
});
$('#menu li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
var len = thisPath.length;
//alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath != '/' && thisPath == currentPath.substring(0,len)
&& !$(this).hasClass('active')) {
$(this).addClass('active');
} else if (thisPath=='/' && currentPath == '/')
{
$(this).addClass('active');
};
});
});
</script>
</body>
</html>
{% extends "base.html" %}
{% block topbar %}
{% endblock %}
{% block topmenu %}
<section class="navbar">
<div class="navbar-inner main-menu">
<div class="row-fluid">
<div class="span2">
<img src="/public_media/index_01 edited4.png" alt="">
</div>
<div class="span10">
<nav id="menu" class="pull-right" >
<ul>
<li class="active">Home<br/><span>CoAssets</span></li>
<li>News</li>
<li>Portfolio</li>
<li>Opportunities</li>
<li>New Opportunities</li>
<li>Transaction</li>
<li>Research</li>
<!--li>Account</li-->
<!--li>Admin</li-->
</ul>
</nav>
</div>
</div>
</div>
</section>
{%comment%}
<div class="label label-warning offset2">
<p>CoAssets Beta</p>
</div>
{%endcomment%}
{% endblock %}
Using bootstrap 3.0, navbar-inner is no longer a class, and in my case, when experiencing this issue, removing that class resulted in the correct behavior.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar navbar-inverse ">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsing-nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsing-nav">
<ul class="nav navbar-nav">
<!-- dropdown items go here -->
</ul>
</div>
</div><!--/.navbar -->
</div><!-- /.container -->
</nav>
alternatively, you could add the following into your style declarations to self-support this
.navbar-inner {
min-height: 50px;
}
The issue is cause by a combination of things:
no text in navbar when in collapsed mode (most common is navbar-brand item)
this leaves on floated elements in the layout
removal of navbar-inner class from the bootstrap library
the dev team fixed this here, however there are a lot of example pieces of code out there where users who needed to use a nav inside of a .container, and recommended using .navbar-inner... which no longer exists.
The use of that non-existent class throws off your css because bootstrap compiles the css from less, and that property is assigned to the .navbar property, but not .navbar-inner, so basically the min-height property does not wind up being assigned assigned to your navbar, and you're left with no height on the nav, no text to give the element a calculated height, and only floating elements that are outside of the flow and don't get calculated in height computations.
I had a similar problem , but just I added "position:fixed " for container and it works. Try , maybe it works for you.