I'm the thousandth person to ask a similar question, so I'm certain it's something simple.
First time working with boostrap / jinja in Chrome. Simply put, the button is there, but clicking it does nothing. The data is all populating from Jinja just fine, and the jinja is rendering out the for loops properly, with matching id's between target calls and div id's.
**EDIT: After following the suggestion of looking at this URL: https://getbootstrap.com/docs/5.0/components/modal/#usage and cutting and pasting the sample "live demo" that isn't working either. Could be something environmental I'm missing?
<!DOCTYPE html>
<html lang="en">
<html>
<head>
</head>
<body>
{% block content %}
<table>
<tr>
<td>
{% for loc, content in variant.location.items() %}
{% set modal_id = day.header + item_name +variant.variant_name %}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{{modal_id}}">{{ loc }} : {{ content.quantity }}</button>
{% endfor %}
</td>
</tr>
</table>
{% endblock %}
</body>
{%block modals%}
{% for loc, content in variant.location.items() %}
{% set modal_id = day.header + item_name + variant.variant_name %}
<!-- Modal -->
<div id="{{ modal_id }}" class="modal fade" role="dialog" style="z-index: 10000000">
<div class="modal-dialog">
<div classs="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p>STUFF</p>
</div>
</div>
</div>
</div>
{% endfor %}
{%endblock%}
</html>
Based on your generated HTML, I can see two main issues.
Your id attributes contain non-standard characters, which often cause problems for libraries like Bootstrap. Please familiarize yourself with the documentation:
Using characters except ASCII letters, digits, '_', '-' and '.' may
cause compatibility problems
Remove the non-standard characters (such as (, ), /, , and what appear to be non-ASCII smart quotes (“ and ”)) from your id attributes, which should solve this problem.
The other issue is that your generated HTML doesn't seem to have the Bootstrap CSS or JS loaded anywhere at all. Without the JS, the modals wouldn't do anything. The JS is what makes the modals appear.
You need to load these at the start, along with jQuery which is a dependancy for Bootstrap.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
Related
I'm using flask to make a webserver, and while trying to edit the CSS of another template other than index.html, the CSS doesn't apply. The file system is as follows:
FlaskApp
app.py
static
style
style.css
templates
index.html
test.html
static and templates are both folders. index.html gets the CSS but test.html does not. The link is : "link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style/style.css') }}". Both html pages have the same link to the css file. What do I have wrong?
A simple flask app can have a minimalist structure like this one:
project_folder
|---------- app.py
|---------- config.py
|---------- .env
|---------- requirements.txt
|---------- .flaskenv
|---------- app/
|------ routes.py
|------ models.py
|------ __init__.py
|------ forms.py
|------ templates/
|-------- base.html
|-------- index.html
|-------- test.html
|------ static/
|-------css/
|------- styles.css
|-------js/
|------- app.js
This structure makes it easier to work with the different parts of a flask application following the principle of separation of concerns.
Flask has a concept called template inheritance. This is where one template can use the layout, styles, features et cetera of another template. In the structure above, I have three templates:
base.html : this is the parent template from which other templates will inherit
index.html : child template
test.html : child template
base.html will include a link to the styles.css file which is located in the css subfolder within the static folder. Both index.html and test.html will inherit the styles.css link from the base.html template.
<!-- base.html -->
{% extends 'bootstrap/base.html' %}
<!-- Title Section -->
{% block title %}
{% if title %}
Test | {{ title }}
{% else %}
Flask App
{% endif %}
{% endblock %}
<!-- Link Styles -->
{% block styles %}
{{ super() }}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename = 'css/styles.css') }}">
{% endblock %}
<!-- This is borrowed from Bootstrap -->
<!-- Navbar Section -->
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Flask App</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
{% endblock %}
<!-- End of Navbar Section -->
<!-- Your Content Goes Here -->
{% block content %}
<div class="container">
<!-- Other templates' content will go here -->
</div>
{% endblock %}
<!-- End of Your App Content -->
Above, base.html inherits the styles used by bootstrap/base.html using the keyword extends. This keyword is used every time you want to inherit another template.
If you look at the styles block, you can see the link that points to styles.css. That's it!
Now we can make the other two templates to inherit base.html.
<!-- index.html -->
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-sm-12">
<!-- title -->
<h1>Home Page</h1>
</div>
{% endblock %}
You can see that the keyword extends is used, meaning it inherits everything from base.html. We can do the same for test.html:
<!-- test.html -->
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-sm-12">
<!-- title -->
<h1>Test Page</h1>
</div>
{% endblock %}
You can add classes and ids to your child templates and pass your styles in the styles.css file and they will be applied across your application.
These may be a lot of new concepts to you. Take your time to learn them and soon everything will make sense and become easier. As always, check the flask documentation for more specific information.
I've seen a ton of unanswered questions about VSCode formatting (and if not here, where do you ask these questions?).
There are 2 main issues I run into constantly when I'm trying to write django-html templates.
1. Basic HTML tag linebreak doesn't occur in django-html files.
When you write an html tag, and press enter inside of it, it should split the tag with an empty line in the middle like.
Expected behavior (pipe "|" represents the cursor):
<!-- Write the tag -->
<div>|</div>
<!-- Press enter -->
<tag>
|
</tag>
Here's what's happening in the django-html file after enter:
<!-- Press enter -->
<tag>
|</tag>
How do you fix this WITH proper template tag formatting (below)?
2. Django template tags don't indent as expected.
Tags within if, with, block, etc. tags should be indented. (treated like html)
Expected result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Instead, the html tags within the django template tags are flattened on the same indent level.
Actual result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Also if you're extending a template:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
What happens:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
Conclusion
I've used both beautify and prettier to try to solve the problems, but neither did the expected behavior 100% (especially with the template tags), but they did help.
I believe with slight tweaks they could have the expected behavior and treat django template tags as html tags AND have the html linebreak feature.
How do you get these to format with these 2 simple specifications correctly?
I got the desired result by using the Twig Language 2 extension and putting the following in my project settings:
"files.associations": {
"*.html": "twig"
},
I want to convert the "include" template tags in this HTML code I have from Django server-based to Backbone.js so that I can separate my frontend from the backend and not mix them together in my HTML code; I am using three of them to add code from three separate HTML files. I'm still new to Backbone.js as well.
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Gregory Desrosiers (uWaterloo) - To Do List</title>
<!-- Links to static pages in Django development server are not shown for brevity. -->
</head>
<body>
<!-- User Account Bar (includes modals) -->
{% include "UserAccountBar.html" %}
<br/><br/><br/><br/><br/>
<!-- Main Body -->
<div id="mainBodyBlock">
{% if request.user.is_authenticated %}
<!-- The original To Do Task form is not shown for brevity. -->
<br/><br/>
{% regroup task_list by category_of_task as tasks_organized_by_category_list %}
<!-- List of checkboxes based on the categories -->
<div id="categoryCheckboxes">
{% include "TaskChecklistCategoryCheckboxes.html" %}
</div>
<br/><br/><br/>
<!-- List of tasks from backend -->
<div id="listOfThingsToDo">
{% include "ListOfTasks.html" %}
</div>
<br/><br/>
{% else %}
<!-- Original code is not shown for brevity. -->
{% endif %}
</div>
</body>
</html>
I know there's the jQuery script approach according to this question, but suppose that I am not allowed to use anything else than Backbone.js for my frontend. There's also this approach, which my initial impression is that it's kind of cumbersome to use.
Does Backbone.js have a template tag I can use to include separate HTML files?
In my posts, I sometimes include the same HTML pattern.
To do it so, I created pattern.html in _includes/ and include it in my posts with :
{% include pattern.html %}
I would like to add a CSS file (or any other code) in my header if, and only if, pattern.html as been used in my post. To put it in pseudo-code, I would like to get the following layouts/default.html:
<!doctype html>
<html>
<head>
{% if pattern.html is included in the post %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
I already tried to assign a variable in pattern.html and to test it in my layout, but this assignement occurs too late: the layout is already processed. I know I can pass a variable through YALM, but my objective is to get rid of it. I would prefer not to use plugins to do this.
It seems asking the question helped me to answer it!
You can use the Liquid contains in order to look for a pattern in your post.
For example, if the included pattern.html contains a particular piece of code (<!--pattern--> for instance, or any particular HTML), you can use in your head:
<!doctype html>
<html>
<head>
{% if content contains "<!--pattern-->" %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
This can be used for any HTML pattern. For example, if you want to call the CSS file producing syntaxic coloration only if there is code in the page, use:
<!doctype html>
<html>
<head>
{% if content contains "<code>" %}
<link rel="stylesheet" href="code.css">
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
I have a page, which is served by apache. When I upload images by the django's server (on localhost:8000) page, it does show me the uploaded image properly. However when I upload images by the apache server (on localhost) page, it does not show the uploaded image. Only when I reload the page on the django's inbuilt server (localhost:8000) i can see it on both the page served by the apache and django's server.
This was the index.html:
{% load static from staticfiles %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
<head>
<title>leo</title>
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>
....
....
And here's the other part of it for image:
{% for Status in status %}
<p class="user">{{ Status.creator.get_full_name }}</p>
{% if Status.image %}
<div class="image_image">
<center>
<img src="{{Status.image |thumbnail_url:'status'}}"/>
</center>
</div>
<p class="status_image">{{Status}}</p>
<span class="clear"></span>
<hr>
{% else %}
<p class="status_status">{{Status}}</p>
<span class="clear_right"></span>
<hr>
{% endif %}
{% endfor %}
After I removed the EASY THUMBNAILS tag from the html file and made these changes on the html file, I was ok.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
....
....
And this:
<div class="image_image">
<center>
<img src="{{ MEDIA_URL }}{{Status.image}}" width=300px />
</center>
</div>
Why is apache behaving so? And also in the uploaded directory it was creating an extra image for the same image. I guess this is because easy thumbnails creates a new thumbnail for the image. Am I wrong somewhere? Is it the problem of easy_thumbnails tag??? If it is. How do I make it work. Or else how can I a achieve thumbnails of the images like easy thumbnails? Please guide me. Thank you!