sScrollY changes column widths

bewmar

I have a datatable that is using the underlying HTML table's widths to size the columns. Everything is great until I try to implement sScrollY, at which point all my column widths are slightly resized. I have bAutoWidth set to false. Any tips on how I can implement sScrollY while maintaining my original column widths? Any help is greatly appreciated! Great plug-in Allen!

allan

DataTables needs to set the column widths when scrolling is enabled because the header and the body are different table elements - thus to make them align correctly they must be explicitly set. This can be a little counter intuitive, particularly with bAutoWidth:false, but it's really the only way to make them align. Thus the best way is "go with it" :-). I would suggest removing the bAutoWidth:false and possibly using sWidth to set the column widths (in fairness DataTables should be reading the values that you give in the HTML - but try sWidth to see if that helps as it will force DataTables to use it's column width calculations on the first draw which should result in the resize not being noticeable.

Allan

brrusu

Hey Allen,

1)
Thanks for your response. I have the same issue as well. So I tried to set the width like this

"aoColumnDefs" : [
{"sWidth": "5%", "aTargets":[0]},
{"sWidth": "50%", "aTargets":[1]},
{"sWidth": "25%", "aTargets":[2]},
{"sWidth": "20%", "aTargets":[3]}
],

but the columns are still not aligned :( I really do not like how this looks. There must be a way to solve this sScrollY problem.

2)
I also have another issue with sScrollY. For another table that I have on a different page, I set a first column to have check boxes inside of it and when the user selects the checkbox in the thead, then all the checkboxes are checked for all the rows (it has the check all effect). So, I set that event to happen when clicking select all, and it works, but when I enable the sScrollY, the check all box inside of my when clicked does not make the other rows' checkboxes be checked. For some reason, it removes the event handler I attached to these rows. I have no clue why! Any clue why this could be happening??
[If I need to start a new discussion because this is a bit separate issue, please let me know]

Thanks in advance!

allan

1. Can you link to your page showing the problem please? There are a lot of complicate factors in the column widths and it would be very helpful to be able to see the page.

2. I don't think it will be removing the event, but more likely the event isn't being applied. What is the selector you are using to add the event handler? Bare in mind that the header in a scrolling table is not inside the main table - it is broken out into its own table (have a poke at it with Firebug).

Allan