Using autopagination in django and formatting issues

Question

I'm using django-paginate and getting weird formatting issues with the {% paginate %} tag. I have attached an image of the problem.

I was just wondering what could be potentially causing this?

In the image below I'm on the first page. Notice that the 1 is cut off and also that the pages are strangely ordered and the previous/next is not really visible.

My template is just this for now:

{% extends "base.html" %}
{% load mptt_tags %}
{% load pagination_tags %}
{% load i18n %}
{% block body %}
{% autopaginate parts 20 %}
{% paginate %}

Answer 1

That's not related to Django, neither to Django-Paginate. It seems that you're using Bootstrap as your front-end framework, and that implies issues such that.

I've implemented a similar approach for this site manoomit.com, creating a custom template for managing pagination within django-paginate.

It looks like that:

{% if is_paginated %}
{% load i18n %}
<div class="pagination pagination-centered">
    <ul>
    {% if page_obj.has_previous %}
    <li><a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" class="prev">&lsaquo;&lsaquo; {% trans "previous" %}</a></li>
    {% else %}
    <li class="disabled"><a href="#">&lsaquo;&lsaquo; {% trans "previous" %}</a></li>
    {% endif %}
    {% for page in pages %}
        {% if page %}
            {% ifequal page page_obj.number %}
            <li class="active"><a href="#">{{ page }}</a></li>
            {% else %}
            <li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}" class="page">{{ page }}</a></li>
            {% endifequal %}
        {% else %}
            ...
        {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
        <li><a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" class="next">{% trans "next" %} &rsaquo;&rsaquo;</a></li>
    {% else %}
        <li class="disabled"><a href="#">{% trans "next" %} &rsaquo;&rsaquo;</a></li>
    {% endif %}
</ul>
</div>
{% endif %}