I have two div containers for which I have fixed the height and width. One of the containers holds the body of the blogpost and other holds the list of all the posts created. Since, body of a blogpost or list of posts can be larger than the size of their div container. So, I want to dynamically increase container's size when they exceed its size. How can I achieve it either using css or javascript?
css file
body {
background-color:#FFCCFF;
}
#container {
position:absolute;
top:50px;
left:100px;
right:100px;
bottom:50px;
}
#content {
margin-top:20px;
padding:0;
width:70%;
height:550px;
border:1px solid black;
background-color: #282828 ;
color:white;
}
#footer {
width:100%;
height:50px;
border:1px solid black;
}
#rightnav {
position:absolute;
top:18px;
right:20px;
width:275px;
height:550px;
background-color: #282828 ;
}
#rightnav p {
margin:0px 0 10px 0px;
padding:0px;
color:#CCCCFF;
}
#rightnav h2 {
text-align: center;
background-color: #000000;
margin:0;
color:#FF9900;
}
#rightnav a {
text-decoration: none;
}
#posts {
padding:0;
width:80%;
border:1px solid black;
}
#posts h2 {
margin:0;
padding:0;
}
#posts p {
margin:5px;
padding:0;
}
#content a {
text-decoration: none;
background-color: none;
color:black;
}
base.html #every other html files inherit from this base file
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
</head>
<body>
<div id = "container" style="clear:both;">
<div id = "content">
{% block post %}
{% endblock %}
</div>
<div id = "rightnav">
<h2>Popular Posts</h2>
{% block popular_posts %}
{% endblock %}
</div>
</div>
</body>
</html>
post.html #the template which deals with showing posts
{% extends "blog/base.html" %}
{% block post %}
{% load django_markdown %}
<h2>{{post.title}}</h2>
{{ post.body|markdown }}
{% endblock %}
{% block popular_posts %}
{% for post in posts %}
<p>{{ post.title }}</p>
{% endfor %}
{% endblock %}
Adding to Marcanuy's answer, you have to remove the bottom:50px given to the #container div.
And by removing position:absolute from unwanted places will make your css neat. If you want to position your div side by side, you can use display:flex for your parent (#container) div.
EDIT: Have also removed the position:absolute property and have added margin:50px to make your div center-aligned. (You can also use padding property)
Refer : JsFiddle
#container {
position:absolute;
top:50px;
left:100px;
right:100px;
}
#content {
padding:0;
width:70%;
min-height:550px;
border:1px solid black;
background-color: #282828 ;
color:white;
}
#rightnav {
width:275px;
min-height:550px;
background-color: #282828 ;
}
Change your height with min-height, this will make your containers have at least the specified height, then they will grow and fit their content needs.
#rightnav {
min-height:550px;
}
#content {
min-height:550px;
}
Related
I have a Django model as shown below
class operationTemplates(models. Model):
templateID = models.IntegerField(primary_key = True)
templateCategory = models.CharField(max_length=255, blank=True, null=True)
templateName = models.CharField(max_length=400, blank=True, null=True)
templatePreopBundle = models.CharField(max_length=255, blank=True, null=True)
templatePosition = models.CharField(max_length=20, blank=True, null=True)
I want to display the data as a tree view using either CSS and html.
Tree view should order the data by "templateCategory" as follows
- Category1
|__templateName1
|__templateName2
|__templateName3
+ Category2
- Category3
|__templateName6
|__templateName7
|__templateName9
|__templateName10
my views.py has the following;
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
group['cat'] = operationTemplates.objects.filter(templateCategory=cat).values()
context = {
'catergoryList': list,
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context)
In my template file I am using CSS and html to display a tree structure as shown above, where templates are ordered under template categories. (CSS code not shown)
<td colspan="2">
{% for cat in catergoryList %}
<ul id="parent_node">
<li><span class="caret">{{ cat }}</span></li>
{% for x in group.cat %}
<ul class="nested_child">
<li>{{x.templateName}}</li>
</ul>
{% endfor %}
</ul>
% endfor %}
</td>
Unfortunately, the above code only displays the parent nodes and the child nodes remain blank. Can someone please help.
I am using Django2 and Python3.7
Thanks in advance.
Bootstrap 4/5 Seems to come with a tree view, so I'd say that might be the easiest way of doing this..
View
def do(request):
packed = {}
for cat in operationTemplates.objects.all().values_list('templateCategory', flat=True).distinct():
packed['cat'] = operationTemplates.objects.filter(templateCategory=cat)
data = {
'packed': packed
}
return render(request, 'thing.html', data)
Template
Uses Bootstrap 4
see: https://mdbootstrap.com/docs/b4/jquery/plugins/treeview/
<script>
// Treeview Initialization
$(document).ready(function() {
$('.treeview-animated').mdbTreeview();
});
</script>
<div class="treeview-animated w-20 border mx-4 my-4">
<h6 class="pt-3 pl-3">Things</h6>
<hr>
<ul class="treeview-animated-list mb-3">
{% for cat, list in packed %}
<li class="treeview-animated-items">
<a class="closed">
<i class="fas fa-angle-right"></i>
<span>{{cat}}</span>
</a>
<ul class="nested">
{% for i in list %}
<li>
<div class="treeview-animated-element">{{i.name}}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
views.py
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
opNames = {}
opNames = operationTemplates.objects.filter(templateCategory=cat).values()
group[cat] = opNames
context = {
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context )
CSS file has the following code
/* ————————————————————–
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/* ————————————————————–
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree > li:last-child { padding-bottom: 0; }
/* ————————————————————–
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
/*background: #fff;*/
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #12d7e6; }
/* ————————————————————–
Tree expanded icon
*/
label.tree_label:before {
background: #000;
color: #fff;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
content: '+';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/* ————————————————————–
Tree branches
*/
.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid #777;
content: "";
}
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '';
}
label.tree_label:after { border-bottom: 0; }
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
my template file has the following code to display the tree view
<!-- tree view -->
<ul class="tree">
<li>
<input type="checkbox" id="c0" />
<label class="tree_label" for="c0">Vascular Surgery</label>
<ul>
{% for k, v in group. Items %}
<li>
<input type="checkbox" checked="checked" id="c{{forloop.counter}}" />
<label for="c{{forloop.counter}}" class="tree_label">{{ k }}</label>
<ul>
{% for x in v %}
<li><span class="tree_label">{{ x.templateName }}</span></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
</ul>
<!-- tree view end-->
I'm looking to use a drag-n-drop feature for updating a table in my Django model.
I need to be able to drag items (a list of model objects) between 3 baskets and update the item's basket type in the model. My model contains food items and the status of these items. So the food.names will be the items dragged and 3 baskets are the food.status: 'don't have', 'have', 'need to buy'. Just like this example: https://www.javascripttutorial.net/sample/webapis/drag-n-drop-basics/.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1, #div2, #div3 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the items back and forth between the three div elements.</p>
{% for row in all_food %}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
{% if row.status_type == 'have'%}
<ul>
<li>{{row}}
</ul>
{% endif %}
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
{% endfor %}
</body>
</html>
The code above comes out as 33 boxes with the items in the for loop scattered among the boxes.
I mainly use Python and don't have much experience working with front end code. What can I try next?
I am trying to charge a subscription on Stripe API in test-mode and my charge keeps getting declined. Everything seems to be working fine, except I cannot retrieve the "stripeToken" via POST. I tested this by printing the various variables I need and they all work fine... but when it comes to printing stripeToken, I get this error:
MultiValueDictKeyError at /memberships/payment/
'stripeToken'
Request Method: POST
Request URL: http://127.0.0.1:8000/memberships/payment/
Django Version: 2.2
Exception Type: MultiValueDictKeyError
Exception Value:
'stripeToken'
Exception Location: /Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/django/utils/datastructures.py in __getitem__, line 80
Python Executable: /Library/Frameworks/Python.framework/Versions/3.8/bin/python3
Python Version: 3.8.2
Python Path:
['/Users/fred/Documents/yonder/videoservice',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python38.zip',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/lib-dynload',
'/Users/fred/Library/Python/3.8/lib/python/site-packages',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages']
Server time: Wed, 1 Apr 2020 16:20:53 -0700
Here is my view code:
def PaymentView(request):
user_membership = get_user_membership(request)
try:
selected_membership = get_selected_membership(request)
except:
return redirect(reverse("memberships:select"))
publishKey = settings.STRIPE_PUBLISHABLE_KEY
if request.method == "POST":
token = request.POST['stripeToken']
try:
token = request.POST['stripeToken']
customer = stripe.Customer.retrieve(user_membership.stripe_customer_id)
customer.source = token # 4242424242424242
customer.save()
subscription = stripe.Subscription.create(
customer=user_membership.stripe_customer_id,
items=[
{ "plan": selected_membership.stripe_plan_id },
]
)
return redirect(reverse('memberships:update-transactions',
kwargs={
'subscription_id': subscription.id
}))
except:
messages.info(request, "An error has occurred, investigate it in the console")
context = {
'publishKey': publishKey,
'selected_membership': selected_membership
}
return render(request, "memberships/membership_payment.html", context)
And here is my HTML code
{% extends 'courses/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" type="text/css" href="{% static 'css/checkout.css' %}">
<div class="container">
<div class="row">
<h1>Payment</h1>
<div class="col-sm-4 col-md-4">
<p>Selected Membership: {{ selected_membership }}</p>
<p>Price: ${{ selected_membership.price }}<small>/mo.</small></p>
<button onclick="toggleDisplay();" class="btn btn-warning" style="width: 100%;">Checkout with a credit card</button>
<div id="collapseStripe" class="wrapper">
<script src="https://js.stripe.com/v3/"></script>
<form action="." method="post" id="payment-form">
{% csrf_token %}
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame3" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-8a434729e4eb82355db4882974049278.html#style[base][color]=%2332325d&style[base][lineHeight]=18px&style[base][fontFamily]=%22Helvetica+Neue%22%2C+Helvetica%2C+sans-serif&style[base][fontSmoothing]=antialiased&style[base][fontSize]=16px&style[base][::placeholder][color]=%23aab7c4&style[invalid][color]=%23fa755a&style[invalid][iconColor]=%23fa755a&componentName=card&wait=false&rtl=false&features[noop]=false&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController0" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; height: 18px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"><input class="__PrivateStripeElement-safariInput" aria-hidden="true" tabindex="-1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
</div>
<div id="stripe-token-handler" class="is-hidden">Success! Got token: <span class="token"></span></div>
</div>
</div>
</div>
<!-- script for the stripe form -->
<script src="{% static 'js/checkout.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- script for toggling display of the form -->
<script type="text/javascript">
function toggleDisplay() {
var x = document.getElementById("collapseStripe");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
</script>
{% endblock content %}
And here is checkout.js
// Create a Stripe client.
var stripe = Stripe('123456'); //key goes here
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
var successElement = document.getElementById('stripe-token-handler');
document.querySelector('.wrapper').addEventListener('click', function() {
successElement.className = 'is-hidden';
});
function stripeTokenHandler(token) {
successElement.className = '';
successElement.querySelector('.token').textContent = token.id;
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
My Public/Secret API Keys are in my settings file and I've double-checked them; they're both correct.
What am I doing wrong here? This is my first Django/Python project. Appreciate some insight. Thanks.
I am learning web development using django framework. I have little trouble in running python code in an html page. I need to iterate through a list of strings which basically contains the paths of images that I want to show in a carousel. I am getting this error "Invalid block tag on line 83: 'with.i', expected 'endblock'. Did you forget to register or load this tag?" in galleryPage.html file when I try to open that page. These are the few lines of code that I've written so far
/views.py/
def galleryPage(request):
from os import listdir
from os.path import isfile, join
ImageList = []
imagePath = "static/images/gallery/"
for f in listdir(imagePath):
temp = join(imagePath, f)
if isfile(temp):
temp = "../" + temp
ImageList.append(temp)
return render(request, "galleryPage.html", {"imageList": ImageList})
/galleryPage.html/
{% extends 'base.html' %}
{% block title %} GALLERY {% endblock %}
{% block slideshow %}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
{% endblock %}
{% block content %}
<div class="slideshow-container">
{% with.i = 0 %}
<indent>
{{ for image in imageList.0: }}
{% ++i %}
<div class="mySlides fade">
<div class="numbertext"> {% i %} / {{ imageList.size() }} </div>
<img src="{{ image }}" style="width:100%">
<div class="text">Caption Text</div>
</div>
</indent>
{% endwith %}
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
{% endblock %}
{% with.i = 0 %}
should be
{% with i=0 %}
Why do you have imageList.0 instead of imageList?
Also, I think you may want to consider combining your current "with" and "for" into one "for" loop like in the docs I posted above:
{% for key, image in imageList %}
<div class="mySlides fade">
<div class="numbertext"> {% key %} / {{ imageList.size() }} </div>
<img src="{{ image }}" style="width:100%">
<div class="text">Caption Text</div>
</div>
{% endfor %}
This way you won't need to increment i yourself and you take away some complexity (and some sources of errors).
I practice "Flask Web Development"blog article when paging links paging,bootstrap style does not work.But the other can be used.I was using macros import, hope that other places can be common this.Is it necessary to add at import time? .
somebody help me.
this is index.html
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import '_macros.html' as macros %}
{% block head %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block scripts %}
{{ super() }}
<script type="text/javascript">
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
</script>
{% endblock %}
{% block styles %}
{{ super() }}
<style type="text/css">
body {
background-color: #ffffff;
/*background-color: #F0F0F0;*/
position: relative;
}
.header {
background-color: #FFFFFF;
background-attachment: scroll, fixed;
background-position: top left, top left;
background-repeat: repeat, no-repeat;
background-size: auto, auto 100%;
color: rgba(255, 255, 255, 0.5);
height: 100%;
left: 0;
padding: 8em 4em 0 0;
position: fixed;
text-align: right;
top: 0;
width: 20%;
padding: 0 0 0 0;
}
.img {
background-color: #235F2A;
height: 23.6076%;
width: 61.8%;
margin-top: 14.5924%;
margin-left: 19.1%;
margin-right: 19.1%;
padding: 0 0 0 0;
}
.breadcrumb {
margin-left: 25.28%;
margin-top: 3%;
width: 68.33%;
background-color: #FFFF93;
}
.sketcho {
width: 83.7%;
background-color: #ffffff;
opacity: 1;
margin-left: 7.72%;
margin-top: 8.5%;
}
.container-fluid {
margin-left: 20%;
padding-left: 0px;
padding-right: 0px;
}
.sketch {
width: 83.7%;
background-color: #ffffff;
opacity: 1;
margin-left: 7.72%;
margin-top: 1%;
}
section {
padding-left: 17px;
padding-right: 17px;
}
.paging {
margin-left: auto;
text-align: center
}
.center {
margin-top: 320px;
height: 35px;
}
.row_button {
width: 35px;
height: 35px;
float: left;
}
</style>
{% endblock %}
{% endblock %}
{% block title %}Index{% endblock %}
{% block page_content %}
<body id="top">
<div class="container-fluid">
{% for Article in Articles %}
<div class="row sketch">
<section id="one">
<header class="major">
{{ Article.head }}
</header>
<p>{{ Article.body }}</p>
<ul class="actions">
<li>
<button type="button" class="btn btn-info">Learn More</button>
</li>
</ul>
</div>
{% endfor %}
<div class="row paging">
{{ macros.pageination_widget(pageination, '.index') }}
</div>
</div>
<script src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
</body>
{% endblock %}
_macros.html
{% macro pageination_widget(pageination, endpoint) %}
<nav aria-label="Page navigation">
<ul class="pageination">
<li {% if not pageination.has_prev %} class="disabled" {% endif %}>
<a href="{% if pageination.has_perv %}{{ url_for(endpoint, page=pageination.page - 1, **kwargs) }}{% else %}#{% endif %}">
«</a>
</li>
{% for page in pageination.iter_pages() %}
{% if page %}
{% if page == pageination.page %}
<li class="active">
{{ page }}
</li>
{% else %}
<li>{{ page }}</li>
{% endif %}
{% else %}
<li class="disabled"></li>
{% endif %}
{% endfor %}
<li {% if not pageination.has_next %} class="disabled" {% endif %}>
»
</li>
</ul>
</nav>
{% endmacro %}
It seems like you have a typo on your class names.
Try <ul class="pagination"> instead of <ul class="pageination">.
You can find the full docs for the classes to use here:
https://getbootstrap.com/docs/3.3/components/#pagination-default