FixedHeader with horizontal scroll

FixedHeader with horizontal scroll

domingodomingo Posts: 8Questions: 0Answers: 0
edited December 2009 in Bug reports
Hi, is there a way to use FixedHeader with a wide table that has a horizontal scrollbar, so that it moves horizontally when the scrollbar is used

Image of how it looks
http://picasaweb.google.com/lh/photo/E1vZqIBW3pcEVWN6hWFKAA?feat=directlink

Another thing is that FixedHeader seems to disable multicolumn sort

Regards
Domingo

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Hi Domingo,

    Horizontal scrolling: There isn't a method for doing this with fixed header at the moment. When I get a chance to update FixedHeader, this will be the first thing that I add in, as it's been requested a couple of times, but not sure when I'll get around to that, sorry :-)

    Multi-column sorting: Yup - another issue I'm aware of. This is also on the to do list for FixedHeader as a bug. It's due to the way it hands the sorting 'click', the 'shift' key isn't dealt with.

    So much to do :-)

    Regards,
    Allan
  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    Another vote for supporting headers that spill out over the width of the table.

    Image of my problem (the cloned header has been moved down so you can see what's going on):
    http://img.skitch.com/20100110-qn9u2d18gpxcijrdmxj3s7mcpu.jpg

    Thanks,


    J.
  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    Had a look into this - if you set the cloned table's width to the same width as the original table, that sorts out the width of the cloned header cells.

    The problem now is that when you scroll down and the header gets "position:fixed", it pops out of the wrapper if you've set "overflow-x:auto", which is what I want.

    Looking into how to constrain a position:fixed table within a container now...


    J.
  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    Ok, here's what I now know...

    If you wrap the cloned table in a div, and then give that div the position:fixed, a width and overflow:auto; and then you give the cloned table a bigger width, it will overflow properly.

    It would be great if FixedHeader supported this behaviour! It would mean the plugin has to set up the clone a bit differently.


    J.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Hi guys,

    I'm looking into this at the moment, but running into problems with cross browser support... Particularly Safari 4, which is completely galling because I always thought their fixed positioning was very good. The issue I'm having at the moment is fixed in Webkit's nightly, but that's not much use. There is also a bug which isn't fixed - about to be filed.

    So a fairly big update to FixedHeader is in progress, and I want to release it along side DataTables 1.6.0, but it's proving to be an exercise in frustration just now.

    Regards,
    Allan
  • jnthnlstrjnthnlstr Posts: 27Questions: 0Answers: 0
    Allan, thanks for your efforts. I'll be upgrading to 1.6 as soon as you ship it. Good luck ironing out the last bugs!

    I think maybe you could get by using position:absolute for Safari 4 until they fix the bug?


    J.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Yup - I think I will be resorting to using position:absolute for IE6 and Safari4 (how wrong is that...). Safari 4 is fast enough that the positioning of an "absolute" element like this is very smooth, unlike Firefox and IE in which is can be a bit jumpy when scrolling. So not a great position to be in, but at least it should be as simple as grouping Webkit below a certain build number into the IE6 group since the code is already there (well - it will be once I've written it :-) ).

    Regards,
    Allan
  • william_rubiowilliam_rubio Posts: 1Questions: 0Answers: 0
    hi, jnthnlstr

    I also want to make a horizontally scrollable table, I mean I have 10 columns,
    with 5 columns first shown, then I want to scroll to show the next 5 columns,
    can suggest your way to make it?

    thanks
    William
This discussion has been closed.