CODEWITHSUNDEEP
twitter-bootstrapbootstrap-table
Cesar Bielich
Cesar Bielich

Reputation: 4945

adjust height of bootstrap table based on tables returned

I have pages with several tables being returned which can contain just a couple records. You can see the example on my site on this page where the tables with 2 and three letter words only has a few records. The rest of the table is blank at the bottom till the full height of the table is reached. What I want is to adjust the table automatically based on the amount of records that are returned so there is no white space.

I display a max of 10 records per pagination so basically if there are less than 10 records returned it would need to adjust the height, otherwise it can have the full height which is height: 538 which is the amount of pixels based on the height of 10 records.

I am using javascript table so here is my code

var $table = $('#table-javascript-2').bootstrapTable({
    method: 'get',
    url: '2.json',
    height: 538,
    cache: false,
    pagination: true,
    search: true,
    pageSize: 10,
    pageList: [10, 25, 50, 100],
    sortable: true,
    minimumCountColumns: 2,
    columns: [{
        field: 'word',
        title: '2 Letter Words',
        align: 'left',
        width: '20'
    },{
        field: 'score',
        title: 'Scrabble® Points',
        align: 'left',
        width: '20',
        sortOrder: 'desc'
    }]
});

<table id="table-javascript-2"></table>

Is it possible to adjust the height of the table if there are less than 10 records?

Upvotes: 0

Views: 367

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

You could simply remove the specific height of the table and let it be dynamic. Give each row a certain padding, so that you get your desired height with 10 rows and all should be good.

Upvotes: 1

Related Questions