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>

Using django model data in a bootstrap template

I'm attempting to create an expanding list displaying elements of a model that I have in django, but I'm having trouble getting the bootstrap 5 collapse function to work with the data from django. I'm relatively new to both, getting back into coding after an extended break. The code works if I replace id="{{saga.name}} with id="placeholder" and href="#{{ saga.name }}" with href="#placeholder", but refuses to do anything with the code as is.
Is there something going on with how bootstrap 5 interprets the data? I feel like I'm going crazy here.
{% for saga in sagaMemberList %}
{{ saga.name }}
<a class="btn btn-primary" data-toggle="collapse" href="#{{ saga.name }}" role="button" aria-expanded="false" aria-controls="collapse{{ saga.name }}">dropdown</a>
<div class="collapse" id="{{ saga.name }}">
{% for character in mSagaCharacterList|get_item:saga %}
<div class="row"><div class="col">
{{ character.name }}
</div></div>
{% endfor %}
</div>
<br>
{% endfor %}
I'm know it's not the prettiest code and I'm sure it's inefficient as hell, but I'm really struggling to understand why it's not working. Thanks for any insight any of you might have.

After puzzling with it for forever I figured out the answer right after I posted the question, which in hindsight should be obvious. Posting here in case anyone else stumbles across this.
html ids cannot contain whitespace, and the saga.name I was using contained whitespace. Still not sure why {{forloop.counter}} didn't work, but I got around it by adding a method to my model that returned the name in an accepted way.

geocoding error in django-easy-maps

I cant get django-easy-maps to work. It has "geocoding error" error and I am not sure why and how to solve this.
based on this:
https://github.com/bashu/django-easy-maps
I first ran this:
pip install django-easy-maps
settings.py
INSTALLED_APPS = (
...
'easy_maps',
)
EASY_MAPS_GOOGLE_MAPS_API_KEY = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ___0123456789' (not this is not my key but i just put it as example'
in my template for the html
{% extends 'employee/base.html' %}
{% load bootstrap3 %}
{% block page %}
<div class="col-lg-12">
<div class="panel">
<div class="panel-heading bg-blue">
<h4 class="panel-title text-center text-white">
My Map
</h4>
</div>
<div class="panel-body">
{% load easy_maps_tags %}
{% easy_map "Russia, Ekaterinburg, Mira 32" 300 400 %}
</div>
</div>
</div>
{% endblock %}
I run
python manage.py makemigrations
python manage.py migrate
But it doesnt show any map in the page. It has this
It has this "geocoding error" in the html generated file.
<!-- HTML map container -->
<div id="map-canvas-1"
class="easy-map-googlemap">
<!-- geocoding error -->
</div>
What is the problem and what is the right way to setup easy-maps on django ?

I have the same problem with my configuration. I have noticed that the address seems to be case sensitive to a parameter I don't understand
An address can work if all the string is in lower case but the same address with one char to uppercase and it doesn't work anymore.
And this doesn't mean that the address needs to be in lowercase.
For example in my case :
That address works: 28 rue bardin, 92110 clichy
but this one not :
28 rue bardin, 92110 Clichy
and in others situations, it's inverted some uppercase are needed for the address to work properly

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.