(included website image) Essentially, on my website it displays the "Browse Topics" as well as the list of Topics indented as though it is 3fr(It is navigation so it should be on the left) while the "2 Rooms Available" and their contents are displayed beneath but as 1fr. . X.X
Home.html Code
{% extends 'main.html' %}
{% block content %}
<style>
.home-container{
display: grid;
grid-template-columns: 1fr 3fr;
}
</style>
<div class="home-container">
<div>
<h3>Browse Topics</h3>
<hr>
<div>
All
</div>
{% for topic in topics %}
<div>
{{topic.name}}
</div>
{% endfor %}
</div>
<div>
<h5>{{room_count}} rooms available</h5>
Create Room
<div>
{% for room in rooms %}
<div>
Edit
Delete
<span>#{{room.host.username}}</span>
<h5>{{room.id}} -- {{room.name}}</h5>
<small>{{room.topic.name}}</small>
<hr>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock content %}
Website Image
When I remove the browse topic column then the other column moves to the 3fr spot.
SOmething commandeering the 1fr column
Main.html File
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-9'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>StudyBud</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
{% include 'navbar.html' %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li></li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block content %}
{% endblock content %}
</body>
</html>
Navbar.html File
<a href="/">
<h1>LOGO</h1>
</a>
<form method="GET" action="{% url 'home' %}">
<input type="text" name="q" placeholder="Search Rooms..." />
</form>
<a href="{% url 'login' %}">Login<a/>
<hr>
To start with - these divs seem to have gotten out of synch. They are closing off your home container too early. Try removing the last .
{% endfor %}
</div>
</div>
If you just put the raw html you have provided into a .html file and test, that seems to behave as you'd expect, with topic in 1fr and rooms in 3fr. If browse topics is still in your 3fr region, you may need to check your main.html template to see if something else is interfering.
Edit after additional files provided
<a href="{% url 'login' %}">Login<a/>
See the closing <a/> tag in your navbar file? That is mucking up everything. Replace it with </a>
Related
I'm trying to display data that I've read from a csv file into a list, on a Flask rendered html template. For some reason, the html page (/sheet) is completely empty. Any help would be appreciated! Below is the relevant code.
This is the method (in Python) that reads the csv file and tries to open the webpage:
#app.route("/sheet", methods=["GET"])
def get_sheet():
file = open("survey.csv", "r")
reader = csv.reader(file)
registrations = list(reader)
return render_template("sheet.html", registrations=registrations)
This is the code in the sheet.html:
{% extends "layout.html" %}
{% block body %}
<h1>Total registrations</h1>
<ul>
{% for registration in registrations %}
<li>{{ registration[0] }} {{ registration[1] }} {{ registration[2] }}</li>
{% endfor %}
</ul>
{% endblock %}
And here's layout.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- http://getbootstrap.com/docs/4.1/ -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="/static/styles.css" rel="stylesheet">
<title>Survey</title>
</head>
<body>
<!-- http://getbootstrap.com/docs/4.1/components/navbar/ -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand mb-1 h1" href="/">Survey</a>
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" type="button" data-target="#navbarNav" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/form">Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sheet">Sheet</a>
</li>
</ul>
</div>
</nav>
<!-- http://getbootstrap.com/docs/4.1/layout/overview/#containers -->
<main class="container-fluid p-5">
{% block main %}{% endblock %}
</main>
</body>
</html>
In the layout.html file, you did not defined a block body. You have only {% block main %}{% endblock %}.
So to fix the issue, you need to replace {% block body %} by {% block main %} in the sheet.html file.
The sheet.html will be similar to this:
{% extends "layout.html" %}
{% block main %}
<h1>Total registrations</h1>
<ul>
{% for registration in registrations %}
<li>{{ registration[0] }} {{ registration[1] }} {{ registration[2] }}</li>
{% endfor %}
</ul>
{% endblock %}
I am following the book "Django by Example", and right at the beginning of Chapter 3: Extending your blog application, I am trying to load my blog_tags file, however I get this AttributeError:
In template /home/ahmad/Documents/Coding/Django By Example/Excercises/djangoblogapp/mysite/blog/templates/blog/post/list.html, error at line 1
'Library' object has no attribute 'simple'
Here is my base.html:
{% load blog_tags %}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %} {% endblock %}</title>
<link href="{% static "css/blog.css" %}" rel="stylesheet">
</head>
<body>
<div id = "content">
{% block content %}
{% endblock %}
</div>
<div id = "sidebar">
<h2> My Blog</h2>
<p> This is my blog. I've written {% total_posts %} posts so far. </p>
</div>
</body>
</html>
and my post/list.html:
{% extends "blog/base.html" %}
{% block title %}My Blog {% endblock %}
{% block content %}
<h1> My Blog </h1>
{% if tag %}
<h2>Posts tagged with "{{ tag.name }}"</h2>
{% endif %}
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="tags">
Tags:
{% for tag in post.tags.all %}
<a href="{% url "blog:post_list_by_tag" tag.slug %}">
{{ tag.name }}
</a>
{% if not forloop.last %}, {% endif %}
{% endfor %}
</p>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{% include "pagination.html" with page=posts %}
{% endblock %}
Lastly, here is my templatetags/blog_tags.py:
from django import template
register = template.Library()
from ..models import Post
#register.simple._tag(name='useless')
def total_posts():
return Post.published.count()
I have exhausted Google and I cannot find any solution to my problem. I would greatly appreciate your help!
In case it helps, I am using Python 3.6.2 with virtualenvwrapper on a Linux system. Django version is 1.8.6
EDIT: New error that I am getting:
In template /home/ahmad/Documents/Coding/Django By Example/Excercises/djangoblogapp/mysite/blog/templates/blog/base.html, error at line 19
Invalid block tag: 'total_posts'
Basically, the error points towards this line of code:
<p> This is my blog. I've written {% total_posts %} posts so far. </p>
I don't see anything else that could be wrong.
if you want to use simple-tags, remove dot
#register.simple_tag(name='useless')
# ^^^^^
def total_posts():
and edit in the base.html,
replace
written {% total_posts %} posts so far.
<!-- ^^^^^^^^^ -->
to the name of simple tag
written {% useless %} posts so far.
<!-- ^^^^^^^^^ -->
I noticed that when i input a link into for loop in my templates that it gets injected into the first, lower elements. Il illustrate it below:
Base template:
<html>
<head></head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
template which extends Base template
{% extends 'base.html'%}
{% block content %}
{% if elem_list %}
<ul>
{for elem in elem_list}
<li> <a class="bob" href="">
<div class="div1">
<div class="subdiv"></div>
</div>
<div class="div2">
<div class="subdiv"></div>
</div>
</a> </li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
and the output i get on my page
<html>
<head></head>
<body>
<ul>
<a class="bob" href="">
<li> <a class="bob" href="">
<div class="div1">
<a class="bob" href=""></a>
<div class="subdiv"><a class="bob" href=""></a></div>
<div class="subdiv"></div>
</div>
<div class="div2">
<a class="bob" href=""></a>
<div class="subdiv"><a class="bob" href=""></a></div>
<div class="subdiv"></div>
</div>
</a></li>
</ul>
</body>
</html>
Is this some kind of feature Django has? How can i stop it?
This has nothing at all to do with Django.
Your HTML is invalid, since an inline element like a cannot contain a block element like div.
You are presumably viewing the generated HTML via your browser's developer tools, which is doing its very best to interpret your broken HTML.
I am trying to make a simple skeleton template that is the general layout of my site. I changed it to make the three columns be inherited by child templates. But for some reason nothing at all shows up except the navbar. Also, my title and inheritance seems to not be working. That is gonna be my next question. :p
base.html
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<meta name="viewport" content="width=device-width, initial-size=1">
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyFlask</a>
</div>
</div>
</nav>
{% endblock %}
<body>
<div class="col-xs-2">
{% block sidebar_left %}{% endblock %}
</div>
<div class="col-xs-8">
{% block center %}{% endblock %}
</div>
<div class="col-xs-2">
{% block sidebar_right %}{% endblock %}
</div>
</body>
index.html
{% extends "base.html" %}
{% block title%}Index{% endblock %}
{% block sidebar_left %}
<p>Text.</p>
{% endblock %}
{% block center %}
<div class="alert alert-info fade in">
Sample info popup.
×
</div>
<div class="text-center h2">Session info:</div>
<p class="text-center"><b>Browser:</b> <kbd>{{ browser }}</kbd></p>
<hr>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-warning">Button 1</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Button 2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Button 3</button>
</div>
</div>
{% endblock %}
{% block sidebar_right %}
<p>Text.</p>
{% endblock %}
There is a lot wrong with your code.
First of all, your nav element should be within the body tag. I guess this is the reason why nothing shows up. Basically ALL 'visible' html should be within the body tag.
Second, you need to wrap your .col-xs-x classes with a .container and .row element for the bootstrap grid system to work properly. Bootstrap grid system
It seems if I use {% extends "base.html" %} it inherits the template correctly but the navbar doesn't use bootstrap.
If I use {% extends "bootstrap/base.html" %} it doesn't even work. I don't get errors but it just sets the title to Index and then the page is blank.
Another note: The only way I've gotten the navbar to show up is directly putting it inside index.html and using {% extends "bootstrap/base.html" %}
I am using Flask Web Development by Miguel Grinberg and the code is identical except the obvious content.
What am I doing wrong? And does anyone have good resources for slowly jumping into Flask that doesn't just dive in head first? I'm having trouble understanding the little nitpicky details.
base.html:
{% extends "bootstrap/base.html" %}
<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
</head>
<body>
{% block navbar %}
<div class="navbar navbar-inverse" 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">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>
index.html:
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
When using the template inheritance it is common to define the structure of the layout in the base template, and then provide the specific details of each child template in the blocks (like content, page_content, etc).
In the above example where the base template itself is a child template (of "bootstrap/base.html"), the same pattern can be used.
Instead of defining HTML tags (like <html>, <head>, etc.) it's better to use the corresponding blocks. Flask bootstrap defines such blocks corresponding to each of these HTML tags, where child templates can override.
So if you change the base.html template as follows, then the index template can use the layout defined in bootstrap/base:
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" 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">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
Note that in the head block, we are using super() to bring whatever Flask bootstrap has defined in the head block (could be loading CSS, JS files, etc.). This allows the base.html template to customize the head section. However if you do not require this control and only want to specify the title of the page, then you can avoid overwriting head block and just define the title block. To do this change base.html file to start like:
{% extends "bootstrap/base.html" %}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
Removing {% block head %} ... section.
And then modify your index.html template to define the page_name block instead of title:
{% extends "base.html" %}
{% block page_name %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
Now the title of the index page will be "Index - MyFlask", so you could have a common suffix for the title of all the pages.
Or if you need each page to have their own specific title, you may define the title block in there, overriding the title block in base.html.