We Keep Coding

Does wtforms Integer Field force a new line when displayed on webpage?

I am using wtforms as part of a Python + Flask project. There are some cases where I want multiple fields of a form to appear on the same line on the webpage. With SelectField, this works as expected. However, when I use IntegerField, it seems to automatically create a new line after the field is displayed, and I get have more than one on a line.
The Form:
class PremiumMandatory(FlaskForm):
match_dol = IntegerField('Dollar')
match_per = IntegerField('Percent')
The .html
{{form.match_dol.label}}
${{form.match_dol(size=3)}}
&nbsp
{{form.match_per(size=3)}}%
{% for error in form.match_per.errors %}
Using the above, the two fields also appear on different lines on the webpage. Ho do I keep then on the same line?

This is an entirely HTML/CSS problem. There are many ways to put multiple fields of a form on the same line, for example, you could use Bootstrap's grid system, which is very easy to use.
Another simple way is:
<form>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
{{ form.match_dol.label }}
{{ form.match_dol(size=3) }}
</div>
<div style="display: table-cell;">
{{ form.match_per.label }}
{{ form.match_per(size=3) }}
</div>
</div>
<div style="display: table-row;">
...
</div>
</div>
</form>

Perform arithmetic operation in Jinja2

I want to find the difference between two different values. But, I am getting a Jinja2 error. I am not sure about how to find the difference in this template.
I tried using - operator but this did not work. So, I used sub to find the difference between actual and predicted score.
{% for e in question.essays %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{loop.index}}</h3>
</div>
<div class="panel-body">
<div class="actual-score">Actual score: {% if e.actual_score %} {{e.actual_score|round(1)}}/5{% endif %}</div>
<div class="predicted-score">Predicted score: {% if e.predicted_score %}{{e.predicted_score|round(1)}}/5{% endif %}</div>
<p class="essay-text">Text: {{e.text}}</p>
<div class="diff">Difference: {{ e.actual_score|sub(e.predicted_score)}} </div>
</div>
I am getting this error:
TemplateAssertionError: no filter named 'sub'

According to the Jinja2 documentation, using - should work pretty fine. Also from my end, it is working just fine. Mind posting the error message you get when using the operator. I also cannot find the sub tag in the documentation for Jinja2.
Therefore, as Amazing Things Around You has said, I think this should work:
{{ e.actual_score - e.predicted_score }}
Just a side note, the only other template tag I have found that does arithmetic operations close to that is Django's add tag, which also does not do subtraction.

Running Flask environment using HTML:receiving error message of expected else statement

I am getting an error message as follows: TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'elif' or 'else' or 'endif'. The innermost block that needs to be closed is 'if'.
I am using a Linux environment and this code should calculate interest rates.There are seperate files for running the scripts and the function.However once running the program i am getting an error message at the page stating that theres an expected else statement before the following code:
return render_template('interest_form.html', calc_total=True).
Below is the full code:
from server import app, valid_time
from flask import request, render_template
from Calculator import Calculator
#app.route("/", methods=["POST", "GET"])
def interest_total():
if request.method == 'POST':
initial=float(request.form["initial"])
rate=float(request.form["rate"])
time=float(request.form["time"])
Calculator.total_interest(initial,rate,time)
total=Calculator.total_interest()
return render_template('interest_form.html', total=total)
return render_template('interest_form.html', calc_total=True)
#app.route('/time', methods=["POST", "GET"])
def time_interest():
if request.method == 'POST':
initial=float(request.form["initial"])
rate=float(request.form["rate"])
total=float(request.form["total"])
Calculator.time_required(initial,rate,total)
time=Calculator.time_required()
return render_template('interest_form.html', time=time)
return render_template('interest_form.html', calc_time=True)
#app.route('/credits', methods=['GET'])
def credits():
return render_template('credits.html')
I am trying using a html form to send the input:
<!doctype.html>
<head><h2>Interest</h2><head>
<html>
<body>
<div>
<form action="routes.py" method='POST'>
<div style="margin: 10px 0px">
<label>Amount Invested ($): </label><br/>
<input name="initial" placeholder="Amount Invested"/>
</div>
<div style="margin: 10px 0px">
<label>Interest Rate (%): </label><br/>
<input name="rate" placeholder="Amount Invested"/>
</div>
<div style="margin: 10px 0px">
<label>Time Investment (Years): </label><br/>
<input name="time" placeholder="Amount Invested" {%if calc_time %}disabled{% endif %}/>
</div>
<div style="margin: 10px 0px">
<label>Total Interest ($): </label><br/>
<input name="total" placeholder="Amount Invested" {%if calc_total %}disabled{% endif %}/>
</div>
<div style="margin: 10px 0px">
<button type="submit">Submit</button>
</div>
<div><p>{{initial}} and {{time}}</p></div>
{% if total %}<h4>Total amount is<h4>
<textarea name="Amount" rows="5" cols="20"> {{total}} </textarea>
</form>
</div>
<div>
Time Form
Total Form
<br/>Credits Page
</div>
</body>
</html>
I have used a different template code that has a similar function and return format and when running it there seems to be no problem with it.This,however,seems to be showing the abovementioned error message.
(EDIT:I have updated the following code):
{% if total %}<h4>Total amount is</h4>
<textarea name="Amount" rows="5" cols="20"> {{total}}</textarea>
{% endif %}
</form>
Howver the error message is now showing: jinja2.exceptions.TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.

You need to close the if block in your template:
{% if total %}
<h4>Total amount is<h4>
<textarea name="Amount" rows="5" cols="20"> {{total}</textarea>
</form>
{% endif %}
Updated answer after the edit:
You need also an {% endblock %}at the end of the file for closing the {% block content %}at the top of the file.

I was getting a similar error - cause was a {% block content %} which I thought would not be affecting as it was commented out in HTML - turns out it was the culprit.
details:
jinja2.exceptions.TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'endblock'.The innermost block that needs to be closed is 'block'.
I know that each {% block content %} needs an {% endblock %} but what I didn't know was that if you have HTML comments around a {% block content %} , it doesn't work(i.e. it doesn't really get commented)
just putting it here in case anyone struggles the way I did for long before figuring it out.
below in my html code, although this was commented, it was the culprit that was giving me that exception.
`
<!--
{% block content %}
<table>
<tr valign='top'>
<td> <img src="{{ user.avatar(128) }}"></td>
-->
removing the {% block content %} from commented code solved it.

My half a day gone just breaking my head around it. Such a sad state, Jinja really sucks...the message was not clear, I literally had to run through the entire code to check for matching if/for what else... Now I removed all the comments from the page and it worked.. There were no blocks inside such comments..even then it worked... Angry with Jinja...

How to print newlines from mysql using python and flask (html jinja) without using <pre>

Gooday to all. I have been googling about some solutions on how to do this. I would like to print newlines from my database to html (like php's nl2br) So, I have stumbled on a post that says use <pre></pre> but it encapsulates the paragraph on a table like container
It would not be any problem on a desktop but on mobile, you are gonna have to scroll side to side to see the contents, is there any way to print out something like this? (just the newlines without the pesky container like thing )
if I just call it directly using
{{article.notes | safe }}
It does not print newline. It just goes on like
1.Thisisacontentblablabla2.foobarbarbarbar3.loremipsumilovetoeatnoodles4.test
here is the code on html
{% extends 'layout.html' %}
{% block body %}
<center>
<h1>{{article.topic_name | safe }}</h1>
<input type="submit" value="Edit" class="btn btn-danger">
</center>
<div>
<h2> Procedures: </h2>
<pre>
<p align="left"> {{article.explaination | safe }} </p>
</pre>
</div>
<div>
<h2> User Notes: </h2>
<pre>
<p align="left"> {{article.notes | safe }} </p>
</pre>
</div>
<div>
<h2> Commands: </h2>
<pre>
<p align="left"> {{article.commands | safe }} </p>
</pre>
</div>
{% endblock %}
Thankyou So Much in advance :)

I found solution to this problem which caused another problem but thats another topic for another day :)
{{something | safe}}
Just pipe it in the safe tag and it will execute the
I still have not found the solution about Xss on this. since it executes the tags. it also executes malicious javascript tags. Ill ask a new question on this

Can We use page breaks in for loops?

I wanted to print barcodes using for loop in python. This is my code:
`{%- from "templates/print_formats/standard_macros.html" import add_header -%}
<hr>
{% set a = doc.end %}
{% set count = 0 %}
<div class="row">
{%- for i in range(doc.start,doc.end) -%}
<div class="col-md-4 text-center">
<p style="font-family: Code39AzaleaFont;font-weight: normal;font-style: normal;font-size:30px;">
00000000000000{{ i }}</p>
{% set count = count + 1 %}
{{count}}
<br/>
</div>
{%- endfor -%}
</div>
<hr>
<br>
<p class="strong">
<br>
<br>
<br>
{{ _("Authorized Signatory") }}
</p>
</div>`
The problem is,I wanted to restrict the number of barcodes printed on one sheet of paper to 24.Is there any way to do that?

You can add a page break after every 24th barcode using:
{% if count % 24 %}<div style="page-break-before: always;"></div>{% endif %}

HTML doesn't have a really good concept of "paper sheet size". A HTML page has an infinite height and browser's are notoriously bad a printing HTML in a readable way (with the notable exception of Opera).
With CSS 3, three page break properties were defined.
They might be supported by your browser. If they are, then wrap 24 bar codes in a <div> and give that <div> a class which tells the browser to break the page afterwards.
If the browser emits an empty page at the end, then you need two classes: One for the first <div> without a page break and one for every successive <div> and a page-break-before: always;
If that doesn't work well, you should look at PDF. PDF allows you place elements exactly on pages with a known, fixed size.