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+

Robert · Accepted Answer · 2016-03-12 11:28:49Z

5

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

});

Add this code

edited Mar 12, 2016 at 11:28

Robert

5,31843 gold badges70 silver badges115 bronze badges

answered Mar 12, 2016 at 11:09

Nayan Hodar

5311 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justus Romijn · Accepted Answer · 2011-08-11 09:23:17Z

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, 2011 at 9:23

Justus Romijn

16.1k5 gold badges54 silver badges64 bronze badges

4 Comments

Tsundoku Over a year ago

but it should resize them to the sizes I previously stated shouldn't it?

Justus Romijn Over a year ago

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?

Tsundoku Over a year ago

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)

mzalazar Over a year ago

Internet Explorer is not a browser =)

Collectives™ on Stack Overflow

DataTables width problem

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related