footer of django-tables2 table shrinks when bootstrap is linked

Alex K. Published at Dev

Alex K.

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):

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 %}

Alex K.

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%;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-04-5

Comments

0 comments

Modify how a field displays on Django tables2 table

Exporting of Django tables2

footer of django-tables2 table shrinks when bootstrap is linked

footer of django-tables2 table shrinks when bootstrap is linked

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

Emulator wrong screen resolution in Android Studio 1.3

3D Touch Peek Swipe Like Mail

Double spacing in rmarkdown pdf

Svchost high CPU from Microsoft.BingWeather app errors

How to how increase/decrease compared to adjacent cell

Using Response.Redirect with Friendly URLS in ASP.NET

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

BigQuery - concatenate ignoring NULL

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Can a 32-bit antivirus program protect you from 64-bit threats

Make a B+ Tree concurrent thread safe

Bootstrap 5 Static Modal Still Closes when I Click Outside

Vector input in shiny R and then use it

Assembly definition can't resolve namespaces from external packages