bAutoWidth and sWidth ignored when sScrollX is set (v1.7.5)

davec

I just found DataTables and am trying it out, and really love it so far (thank you!!)

In my scenario, the table will be very wide, so I want to allow horizontal scrolling; yet I also want to be able to set fixed column-widths.

I have found that when setting bAutoWidth to false and setting up my fixed column-widths using aoColumns / sWidth ... all is well until the moment I set sScrollX to something. At this point, my fixed column-widths seem to be ignored.

I found this thread: http://datatables.net/forums/comments.php?DiscussionID=2290
... which states my scenario; but relates to an older version of DataTables.

Any suggestions for what I can do to allow horizontal scrolling and also fixed column-widths? Thanks in advance,
Dave

writes_on

Hi

I'm also have this exact problem with DataTables v1.7.6, setting sWidth in aoColumns seems to be ignored when sScrollx is set true. The column widths are set to what I defined (at least as far as I can tell using Firebug), but the columns on the screen seem to be sized by their th content. Here is my initialization code:
[code]
// initialize the table
$table.dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollY": "600px",
"bScrollCollapse": true,
"aoColumns": [
{ "sWidth": "152px" },
{ "sWidth" : "141px" },
{ "sWidth" : "150px" },
{ "sWidth" : "200px" },
{ "sWidth" : "141px" },
{ "sWidth" : "162px" },
{ "sWidth" : "200px" },
{ "sWidth" : "141px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" }]
});
[/code]
Thanks for any help or insight you can provide. DataTables is great by the way, really love using it!

Doug

davec

Doug,

Here are some thoughts from a non-expert.

The moment you set sScrollX or sScrollY, things change significantly under the covers, because a second table is created to provide the (very useful!) fixed header.

Here are two methods I've used to control widths in conjunction with sScrollX/Y:

1. - Set bAutoWidth to false
- Set sScrollX to the sum of your column sWidth values

2. - Set bAutoWidth to false
- Set sScrollX to "auto"
- Do not set column sWidth values, but instead use CSS to set column widths in your underlying table at the TH and/or TD level

Hope this helps.

allan

Hi Doug,

You might also consider trying out the 1.8 beta. I've made a couple of changes to how widths are applied / calculated which will hopefully address the problem you are seeing. If that doesn't help - can you possibly post a simplified table so I can see it going wrong "in action"?

Thanks,
Allan

writes_on

Hi Allan and Dave,

Tried both suggestions and unfortunately neither helped my situation out. I will try to put together a simple implementation that demonstrates this problem, hopefully soon.

Thanks for your help in the meantime!
Doug

allan

That would be great - thanks :-)

Allan

tuon

This might not be what you are looking for, but I had a similar problem. I ended up fixing it by setting an swdith value to all the columns, and setting the sScrollXInner value to be the sum of all those values.

Example:
[code]$("#example").dataTable(
{
"sPaginationType": "full_numbers",
"sScrollX": '100%',
"sScrollXInner": "3000px",
"bScrollCollapse": true,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth" : "100px" },
{ "sWidth" : "100px" },
{ "sWidth" : "100px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "200px" },
{ "sWidth" : "100px" },
{ "sWidth" : "200px" },
{ "sWidth" : "100px" },
{ "sWidth" : "200px" },
{ "sWidth" : "100px" }
]
});[/code]

writes_on

tuon,

Allan let me know about this post (thanks Allan!) and this solved my problem as well! Now the columns are being displayed using the width that I've specified.

Thanks very much for your post, a huge help to me!

Doug