DataTables width problem

Question

I am using the DataTables plugin with jQuery and I've already looked around StackOverflow and found this other question with almost the same problem (except I have no tabs) and I tried what it said there but can't make it work. I have this dropdown in the table to show only 50 records (iDisplayLenth in the code underneath) and when you select 100 or over the table completely resizes itself and I have no idea why. Any help or suggestion will be appreciated. Here's my HTML for creating the table:

<table id="content-table-redesign" class="display">

then the css related to it

#content-table-redesign{border-collapse: separate;width:1241px;margin:0 auto;}
#content-table-redesign th{min-width:45px;color:#2e2e2e;}

and the js which at this point is pretty much a mix of what I originally had and suggestions I found on the other link. Everything is being done inside the $document(function(){});

var oTable = $('#content-table-redesign').dataTable({
        "oLanguage": {
            "sLengthMenu": "Display _MENU_ records per page",
            "sZeroRecords": "Nothing found - sorry",
            "sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
            "sInfoEmpty": "Showing 0 to 0 of 0 records",
            "sInfoFiltered": "(filtered from _MAX_ total records)"
        },
        "aaSorting": [[ 0, "asc" ]],
        "bAutoWidth": false,
        "iDisplayLength": 50,
        "aLengthMenu": [10, 20, 30, 50, 100, 500],
        "sPaginationType": "full_numbers",
        "sDom": '<"top"i><"#up"f>rt<"#bottom2"l><"pagin"p><"clear">',
        "aoColumns" : [
            { sWidth: '500px' },
            { sWidth: '1000px' },
            { sWidth: '1200px' },
            { sWidth: '300px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' },
            { sWidth: '100px' },
            { sWidth: '120px' }
        ] 
    });

    oTable.fnAdjustColumnSizing();

I just realized this error only shows up on IE8 and Chrome 12+

score 5 · Answer 1 · edited Mar 12 '16 at 11:28

5

var oTable = $('#contactsTable').dataTable( {
  "bAutoWidth": false

});

Add this code

edited Mar 12 '16 at 11:28

Robert

5,278
43
65
115

answered Mar 12 '16 at 11:09

Nayan Hodar

508
7
12

score 1 · Answer 2 · answered Aug 11 '11 at 09:23

1

This is just a long shot, but I guess that your browser must resize the window (because with 100 entries in your table, your body-element expands and a scrollbar appears), and therefore oTable.fnAdjustColumnSizing() kicks in and resizes your columns. Might want to check that out?

API reference: fnAdjustColumnSizing

answered Aug 11 '11 at 09:23

Justus Romijn

15,699
5
51
63

but it should resize them to the sizes I previously stated shouldn't it? – Tsundoku Aug 11 '11 at 09:28
You are right. But you stated columns of 1000px wide, do you really want to make your users to scroll horizontal for all the data? How does your initial and re-rendered table look like? – Justus Romijn Aug 11 '11 at 09:48
not really, I just did that to see if something changed but so far that's being completely ignored. The table renders perfectly but when the dropdown value goes >= 100 it starts distorting (making itself wider) – Tsundoku Aug 11 '11 at 10:11
3

Internet Explorer is not a browser =) – mzalazar Nov 25 '14 at 14:14

DataTables width problem

2 Answers2

Linked