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

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

davecdavec Posts: 6Questions: 0Answers: 0
edited February 2011 in General
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

Replies

  • writes_onwrites_on Posts: 11Questions: 0Answers: 0
    edited April 2011
    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
  • davecdavec Posts: 6Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    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_onwrites_on Posts: 11Questions: 0Answers: 0
    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
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    That would be great - thanks :-)

    Allan
  • tuontuon Posts: 1Questions: 0Answers: 0
    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_onwrites_on Posts: 11Questions: 0Answers: 0
    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
This discussion has been closed.