Column widths changing when sorting

eyre.michael

Hello,

I have a strange issue with an app that I am building using Datatables. This application is using JAVA and Struts2, but I do not think that that really has an issue with it, but you never know.

The definition of the table is within a that has a style of width:100%.

Here is the code for defining the table:
[code]
_logSheetTable = $('#logsheet-table').dataTable({
sScrollY: "250px",
bPaginate: false,
bAutoWidth: true,
aaData: [["LeRNum1","Title1","Volume1","Section1","Franchise1","ProductName1","ProductCode1"],["LeRNum2","Title2","Volume2","Section2","Franchise2","ProductName2","ProductCode2"]],
bSort: true,
aoColumns: [
null,
null,
null,
null,
null,
null,
null
]
});
[/code]

The problem that I am having is that when the div width is set to 100% and I click on a column to sort it, the column widths change. If I set the div width to 900px, the column widths do not change. I have tried this on Chrome and Safari, but not on IE yet. I will try it on IE later today.

What can I do to make this not happen? I have use datatables on other application, and this is the first one that I am seeing this problem on.

Thanks

Mike

eyre.michael

Would anyone have an idea about why this is happening? I did find out that if the data caused the vertical scroll bar to appear, the column widths do not change when sorting. If the vertical scroll bar does not appear, the column widths are getting bigger on each sort.

Thanks

Mike

myork

Mike,

We ran into the same issue when using Datatables 1.8.1 and our solution was to upgrade to Datatables 1.9.2 in which the issue does not exist.

NathanSF

I have the same issue, column widths changing on either sorting and filtering. Just tried 1.9.2, exact same result. Happens whether bAutoWidth set to true or false.

This is only happening on tables that are wide enough to have a horizontal scroll bar. The entire table width is being sized dynamically based on sorted or filtered result, but the headers are not being resized. Is there a way to set table width so it doesn't change and is based on what's shown on original page load. Either that, or resize the headers when the table is resized?

allan

Can you link us to a test page showing the issue please? Normally this is simply caused by the fact that the data on the second draw requires column widths to be different since the data is different (longer strings in different columns etc).

Allan

NathanSF

Thanks, Allen. Unfortunately can't link to test page at the moment, would have to create a login with specific permissions on the site (and get authorization to do so). I will try to do that this coming week if we can't solve the issue by then. You hit the nail on the head, the second draw requires different column widths due to different sized strings.

The odd part is that I realize the column headers are resizing, just not as much as the table content. The issue is hardly noticeable on high-res screens, but on low-res monitors the difference is so severe that content shifts by as much as 2 columns. The content for column 12 is under heading column 10, for example.

Update:
Allan pointed out setting "sScrollXInner": "100%" was the culprit. Removed that and columns resize correctly. Thank you!