Strange bug? Columns resize on click

compcentral

For some reason, when DataTables loads the columns are not sized correctly and when I click on a column to sort it, the table grows wider with each click.

You can see it in action on my test site here:

http://208.94.40.202/courseEnroll/Course_Listing.php

Any suggestions?

JavaScript:
[code]
var oTable;

$(document).ready(function() {

/* Init the table */
oTable = $('#example').dataTable( {
"bProcessing": false,
"bServerSide": true,
"bStateSave": true,
"sAjaxSource": "DataTables/examples/examples_support/server_processing.php",

"bPaginate": true,
"sPaginationType": "full_numbers",
// or
//"bScrollInfinite": true,

"bAutoWidth": false,

//"sScrollX": "100%",
//"sScrollXInner": "100%",

"sScrollY": "150px",
//"bScrollCollapse": true,

"bJQueryUI": true,

// Sort first by course type, then by course name, then by start enroll date
"aaSorting": [[1, "asc"], [0, "asc"], [4, "asc"]],
} );

} );
[/code]

table:
[code]



Course Name
Course Type
Teacher
Host District
Number Enrolled
Start Date
End Date




Loading data from server







[/code]

d7a7z7e7d

There is a timeout in jquery.jeditable.js that is causing this. Basically the field grows because the column width is altered by the not-yet-hidden input box in the same column. I fixed it by just setting the delay to 0 and causing the form to submit immediately, allowing jquery to hide the other input before new width values are set.

[code]
else if ('submit' == settings.onblur) {
input.blur(function(e) {
/* prevent double submit if submit was clicked */
t = setTimeout(function() {
form.submit();
}, 0);
});
[/code]

compcentral

I made that change, but sadly no change in behavior. Any other suggestions from anyone?

compcentral

Hmm.. removing "sScrollY": "150px", makes this issue go away or if I add enough data to the database so the table would become larger than 150px, the issues also goes away. Is this a bug of some sort?

I also noticed that performing a search will trigger this behavior as well.

mstrand

Maybe the same issue as this thread now?

http://datatables.net/forums/comments.php?DiscussionID=2680

compcentral

Could be? If so, where do I insert the suggested code:

[code]
.dataTables_wrapper {
width: 700px;
}
[/code]

mstrand

That snippet should go into a stylesheet referenced by the html page. It looks like you are using one named global_layout.css. It could go in there.

dimvic7

I'm experiencing the same problem, to be exact this one plus a few more related to this
- columns resize automatically when searching
- webkit always sets table width to 100% of window (not sure it's related to this)

i found the resizing stops when altering one line in the source (datatables 1.7.6 line 3800):
[code]
o.nTable.style.width = "100%";
[/code]
to
[code]
o.nTable.style.width = "auto";
[/code]

webkit still does not size the table the way i want it to but at least it no longer sets it to 100% of window's size

the way i try to size the table is by adding classes to all of the tags in without any style markup or css attached to the table itself

any real solutions for precise table sizing and fixing the resize problem??

allan

This was the commit which I believe results in this issue: https://github.com/DataTables/DataTables/commit/fdef8e02c363eded753e5f4b2f5647eb81051d1c#media/js/jquery.dataTables.js . So one option is to switch back to the older code. Although is to wrap a fixed element around the table. I'll look more closely at this issue as I'd really like to keep that fix in DataTables.

Allan

davec

I experienced a similar issue recently, but am not sure if it's related to this one.

The issue occurred when using border-collapse:collapse with webkit. When I removed this, all was well.

Hope this helps,
Dave

allan

border-collapse:collapse is a nightmare across browsers! It's amazing how many issues crop up when using it. Thanks for flagging that up!

Regards,
Allan

autoabacus

I encountered what I believe is the same problem when using jeditable. The DataTables editing examples (1.9 at http://datatables.net/beta/1.9/examples/api/editable.html or 1.8) demonstrate it. Click on a cell then click on another cell in the same column and the column gets wider.

You can see what d7a7z7e7d described in his/her 2 march post happening. But in this case the onblur setting is cancel so the suggested fix which is for onblur == 'submit' achieves nothing. Whereas applying the suggested fix (timeout changed to 0) on the 'cancel' branch does fix the problem.

Though clearly this is not an ideal fix.

I have noticed that the jQuery DataTables Editable plug-in from Jovan Popovic does not appear to exhibit this problem.