Search code examples
djangotwitter-bootstrapdjango-tables2

footer of django-tables2 table shrinks when bootstrap is linked

If I link bootstrap to my template, width of the table footer shrinks to the minimum size (occupies just as much space as needed to contain page number, 'Next' button, and total number of rows). When I delete the link everything is OK again but I need bootstrap for my form. How it looks (short footer after adding a link to bootstrap):

Snapshot for short footer after adding a link to bootstrap

There is the code of my templates:

base.html

{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/django_tables2/themes/paleblue/css/screen.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <title></title>
</head>
<body>
    {% block my_table %}{% endblock %}
</body>
</html

object_list.html

{% extends "base.html" %}
{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}

{% block my_table %}
    <div>
        <form action="" method="get">
            {% crispy filter.form filter.form.helper %}
        </form>
    </div>
    {% render_table table %}
{% endblock %}
Solution

  • Seems like all I needed was to add 'width: 100%;' to 'table.paleblue + ul.pagination' rule into django_tables2/themes/paleblue/css/screen.css file.

    Edited css should be like this:

    table.paleblue + ul.pagination {
    background: white url(../img/pagination-bg.gif) left 180% repeat-x;
    overflow: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid #DDD;
    list-style: none;
    width: 100%;
}