Search code examples
pythonhtmlcssdjangodjango-tables2

Vertical Scroll bar django-tables2


Can anyone tell me how to add a vertical scroll bar to django-tables2 instead of having

Page 1 of 2 Next 25 of 49 vehicles

at the bottom of the table.

tables.py

'''
Created on 28 Oct 2016

@author: JXA8341
'''
import django_tables2 as tables
from .models import Vehicle

class CheckBoxColumnWithName(tables.CheckBoxColumn):
    @property
    def header(self):
        return self.verbose_name

class VehicleTable(tables.Table):

    update = tables.CheckBoxColumn(accessor="pk", 
                                   attrs = { "th__input":{"onclick": "toggle(this)"}},
                                   orderable=False)

    class Meta:
        model = Vehicle
        fields = ('update', 'vehid')

        # Add class="paleblue" to <table> tag
        attrs = {'class':'paleblue'}

screen.css

 table.paleblue +  ul.pagination {
  font: normal 11px/14px 'Lucida Grande', Verdana, Helvetica, Arial, sans-    serif;
  overflow: scroll;
  margin: 0;
  padding: 10px;
  border: 1px solid #DDD;
  list-style: none;
  }
div.table-container {
     display: inline-block;
     position:relative;
     overflow:auto;
     }

table.html

<div class='vehlist'>
    <script language="JavaScript">
         function toggle(source) {
             checkboxes = document.getElementsByName('update');
             for(var i in checkboxes)
                 checkboxes[i].checked = source.checked;
         }
    </script>
        <form action="/loadlocndb/" method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {% render_table veh_list %}



            <h4> Location database .csv file</h4>
            {{ form.locndb }}
            <input type="submit" value="Submit" />
        </form>
    </div>

I've looked all over but I can't seem to get a straight answer, or is there a better table module I can use to display the array and checkboxes?


Solution

  • For anyone in the same boat I figured it out.

    I turned disabled pagination

    RequestConfig(request, pagination=False).configure(veh_list)

    then I wrapped the table in a <div> in the html template

    <div style="width: 125px; height: 500px; overflow-y: scroll;">
            {% render_table veh_list %}
    </div>
    

    The <div> then adds a scrollbar to the whole table interface, I personally would have liked to keep the header constantly at the top but this is the best solution I could come up with.