I am working through some beginner Django tutorials to build a basic polling website. I have everything working, but I can't get the formatting to display properly on my "results" page for the polls.
How my page looks:
https://i.stack.imgur.com/AuB6q.png
The votes are being displayed, but you can't see them due to the formatting:
https://i.stack.imgur.com/QgMgr.png
How it is supposed to look:
https://i.stack.imgur.com/PmCOb.png
Below is my code on my results.html:
{% extends 'base.html' %}
{% block content %}
<h1 class="mb-5 text-center">{{ question.question_text }}</h1>
<ul class="list-group mb-5">
{% for choice in question.choice_set.all %}
<li class="list-group-item">
{{ choice.choice_text }} <span class="badge badge-success float-right">{{ choice.votes }} vote{{ choice.votes | pluralize }}</span>
</li>
{% endfor %}
</ul>
<a class="btn btn-secondary" href="{% url 'polls:index' %}">Back To Polls</a>
<a class="btn btn-dark" href="{% url 'polls:detail' question.id %}">Vote again?</a>
{% endblock %}
Any ideas on what I have wrong?
The problem is in your CDN. Change this CDN
<link href="cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/…" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
to this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
I am making a child template in jinja which extends the parent template.In child template I am passing a variable to run a for loop in jinja template,but that part of for loop is not accessible inside the html page in chrome.
parent template-In parent template there is only navbar.
<html>
<head>
<link rel="stylesheet" href="static\navbar.css?v=1.1">
{% block head %}{% endblock %}
</head>
<body>
<nav class="menu">
<ul>
<li>Website</li>
<form action="{{ url_for('search') }}" class="search-form" target="_blank" method="POST">
<input type="text" name="text" placeholder="Search here..">
<button>Search</button>
</form>
{% if name %}
<li>{{name}}</li>
<li>Logout</li>
{% else %}
<li>Login & SignUp</li>
{% endif %}
<li><i class="fas fa-cart-plus"></i></li>
</ul>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
Child template -In child template i am passing a variable for the for loop,but it is not working.
{% extends 'navbar.html' %}
{% block head %}
<title>Flipkart</title>
<!--new version 2nd way to update css-->
<link rel="stylesheet" href="static\gallary.css">
<script src="https://kit.fontawesome.com/04c28a3c9a.js"></script>
{% endblock %}
{% block content %}
<div class="description">
Shopping Website
</div>
<hr>
<h2>Deals Of The Day</h2>
<hr>
{% for i in ids %} -----this part is not coming in browser.----
<h1>sasadLink {{i}}</h1>
{% endfor %}
{% endblock %}
Flask file -- products function
#app.route('/products')
def products():
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT id FROM shoes')
shoes_ids=cursor.fetchall()
print(shoes_ids)
ids = []
for shoes_id in shoes_ids:
ids.append(shoes_id['id'])
return render_template('navbar.html',ids=ids) ---here i am passing the
variable to the child
template-----
I want the for loop content to be displayed on the browser.
I'm using djangoCMS to add CMS functionality in my website templates but the placeholders i have placed on the placed are not showing up, i have defined my CMS_TEMPLATES IN MY settings.py and put the {% load cms_tags sekizai_tags sorl_thumbnail %} on my base.html and also added {% load cms_tags sekizai_tags %} on my other templates that expand the base.html, but when i log into djangoCMS admin and visit my pages i find no placeholders in my structure view. what could be the problem here?
settings.py
CMS_TEMPLATES = [
('index.html','Home'),
('solutions.html','solutions'),
('commercial.html','Commercial Solar Solution'),
('residential.html','Residential Solar Solution'),
('on-grid.html','On grid solutions'),
('off-grid.html','Off Grid solutions'),
('water-heating.html','Solar Water Heating'),
('solar-water-pumping.html','Solar water pumping'),
('hybrid-grid.html','Hybrid Solutions'),
('outdoor-lighting.html','Outdoor Lighting'),
('contacts.html','Contacts'),
('terms-of-use.html','Terms of use'),
]
base.html
<!DOCTYPE html>
{% load static %}
{% load cms_tags menu_tags sekizai_tags %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% render_block "css" %}
</head>
<body>{% cms_toolbar %}
<ul> {% show_menu 0 0 100 100 %} </ul>
<div id="mySidenav" class="sidenav">
<div class="div">
<img src="{% static 'administration/css/images/icons/logo.png' %}" alt="" class="img-responsive">
</div>
<ul class="navlist">
×
<li>Home</li>
<li>About us</li>
<li>Blog</li>
<li>Projects</li>
<li>Downloads</li>
</ul>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-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 'administration/css/images/icons/logo.png' %}" alt="" class="img-responsive">
</a>
</div>
</nav>
{% block content %}
{% endblock %}
{% render_block "js" %}
</body>
</html>
solutions.html
{% extends 'base.html' %}
{% block title %} Commercial pv solar heating solutions {%
endblock %}
{% load static %}
{% load cms_tags %}
{% block content %}
<div class="water__heating--section">
<div class="row">
<div class="col-lg-6 solutions__content--image" id="commercial__banner--image">
<h4 class="small__title">support and Evaluation</h4>
<div class="small__content small__content--default">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima soluta nesciunt consequuntur esse consectetur
</div>
</div>
<div class="col-lg-6 solutions__content--box">
<h1 class="heavy__title"> We Can Help your business <span class="emphasis">go solar</span> </h1>
<div class="small__content ribbon__content--default">
{% placeholder "commercial section one" %}
</div>
</div>
</div>
</div>
{% endblock %}
Inside your child template (which extends base template) there is should be something like this:
{% extends "base.html" %}
{% load cms_tags %}
{% block title %}{% page_attribute "page_title" %}{% endblock title %}
{% block content %}
<div>
{% placeholder "feature" %}
</div>
<div>
{% placeholder "content" %}
</div>
<div>
{% placeholder "splashbox" %}
</div>
{% endblock content %}
And base template should looks like this:
{% load cms_tags menu_tags sekizai_tags %}
<!doctype html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
</head>
<body>
{% cms_toolbar %}
<div class="container">
<ul class="nav">
{% show_menu 0 100 100 100 %}
</ul>
{% block content %}{% endblock content %}
</div>
</body>
</html>
I am trying to learn django and had create a simple website but the problem is when I try to insert bootstrap the layout is display incorrectly and then I found out the problem is with this empty:
<style type="text/css"></style>
which automatic inserted( I had tried to insert empty html and the style is still there) and here is my django template html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% include 'news/includes/header.html' %}
{% block title %}
<title>News</title>
{% endblock %}
</head>
<body>
{% include 'news/includes/nav.html' %}
<div class="row">
<div id="top-ads" class="col-md-12">fsdfsdf</div>
</div>
<div class="row">
<div id="left-ads" class="col-md-2">sdf</div>
<div id="container" class="col-md-8">
{% block container %}
{% if news_list %}
<ul>
{% for new in news_list %}
<li> {{ new.title }}</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
</div>
<div id="right-ads" class="col-md-2">yodsfddf</div>
</div>
<div class="row">
<div id="footer" class="col-md-12">sdfsdfsd</div>
</div>
</body>
</html>
Output:
edit:
OK this is getting weirder and weirder if I try to move the <style> tag even I drop at the same position all the layout work again. I surrender
I have a form wherein I'm trying to insert a static image file in between an if-else loop in HTML. Here's the source code of the template:
<!DOCTYPE html>
<html>
<head>
<title>Rango</title>
</head>
<body>
<p>
<ul>
{% if user and not user.is_anonymous %}
<li>
<a>Hello {{ user.get_full_name|default:user.username }}!</a>
</li>
<li>
Logout
</li>
{% else %}
<li>
<img src="{% static "images/twitter.png" %}" />
</li>
{% endif %}
</ul>
</p>
<form id="evangelized_form" method="post" action="/rango/fillform/">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
{{ field.errors }}
<b>{{ field.help_text }}</b><br>
{{ field }}<br><br>
{% endfor %}
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
However, this is the error that I'm encountering:
TemplateSyntaxError at /rango/fillform/
Invalid block tag: 'static', expected 'endif'
How are static images inserted in between if-else loop in templates in Django?
I believe you need to add
{% load staticfiles %}
at the top of your template.