ColVis with alternative styling format error with filtering

ColVis with alternative styling format error with filtering

sylvaintsylvaint Posts: 15Questions: 0Answers: 0
edited July 2011 in Plug-ins
Table becomes too wide by width of button when filtering with the Search box.

http://www.datatables.net/release-datatables/extras/ColVis/style.html

Type PSP in the search box of the above example to reproduce.

Replies

  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Problem with Firefox 5.0, ok with Chrome and Safari.
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    I take that back, problem is with Chrome also. Reproduced it with Chrome with one of my program.
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    This is fixed in the DataTables nightly - available on the downloads page: http://datatables.net/download/ . It will be packaged up and released some time in the not too distant future. This since runs the current release.

    Allan
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    I am using ColVis 1.0.6.dev
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Are you using DataTables 1.8.2.dev?
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    No, 1.8.1
    Do I have to use 1.8.2.dev ?
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    If you want that particular problem to be fixed. As I noted it is fixed in the DataTables nightly.

    Allan
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Sorry, I thought you meant ColVis nightly...
    With DataTables nightly and ColVis 1.0.6.dev, the width is now OK but the arrows in the header for sorting overlap the ColVis button.
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Looked at it some more. When the scroll bar is removed by inputting a filter into the Search box, the last Column header overlaps the ColVis custom button.

    Tried to modify your fix with iCorrection but did not get anywhere.
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Have you got the CSS override in place like in the example:

    [code]
    "bScrollAutoCss": false,
    [/code]

    Otherwise DataTables is going to apply it's own styling, while you want yours - with the overflow:scroll defined.

    Allan
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    edited July 2011
    With bScrollAutoCss false and

    [code]$('.dataTables_scrollBody').css("overflow-y", "auto");[/code]

    I get the same thing.
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    edited July 2011
    This one with overflow: scroll behaves differently but still wrong.
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Trying to get it to work with overflow-y auto.
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Awesome - thanks so much for the link. It was extremely useful! The overflow-y setting is correct (although it looks like it is being included from the CSS so you shouldn't need to set it in Javascript as well), however DataTables wasn't considering that this might be set - which was wrong and it should.

    I've just committed a fix for this and this is now available as the latest nightly: http://datatables.net/download/ . Update your DataTables JS with that, clear your cache and reload and that should do it!

    Regards,
    Allan
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Cool, overflow-y scroll works great !
    I was trying to get overflow-y auto working so the header stays the same and the table widens by the width of the scroll bar. Any suggestions on that ?

    Thanks for a great tool, sent and hour of support your way :-)
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    [quote]sylvaint said: so the header stays the same and the table widens by the width of the scroll bar. Any suggestions on that ?[/quote]

    The problem with that is that the last column in the body would be misaligned relative to the last column in the header - i.e. in order to keep the ColVis button where you have got it, the table body (the scrolling part) would need to be 17px (or whatever the scrollbar width is in the browser) larger than that the header. There is a significant amount of code in DataTables to ensure that this kind of misalignment can't happen - so I'm afraid, if you want to keep the ColVis button where it is, then the overflow-y: scroll is required, to ensure that the columns do keep alignment.

    One possible option might be to make the ColVis button positioning slightly different - such that it floats on top of the table's header...

    To do that you could try adding a z-index to the ".ColVis" CSS definition (say, z-index: 5) and remove the overflow-y:scroll from both your Javascript and CSS. The "bScrollAutoCss" parameter should also be removed from your Javascript initialisation of DataTables. That should layer the button on top of the table header - regardless of the size of the header.

    Allan
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Thanks Allan, I am happy with using overflow-y scroll.

    Cheers.
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    edited July 2011
    Awesome - good to hear :-).

    Regards,
    Allan

    p.s. Love your use of DataTables - very nicely done!
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Thanks.

    Just found out it does not work properly with Firefox 5 :-(
    Seems like a bug with the overflow-y scroll...

    Works perfectly on Chrome and Safari.
    Oh well.
  • sylvaintsylvaint Posts: 15Questions: 0Answers: 0
    Works fine in Firefox 5 with bScrollCollapse false.
    Perfectly happy with that !!!
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Fair enough! It's taking a fair bit of getting used to the Firefox version numbers going up so quickly! Give me a shout if there is anything else you want me to look at.

    Allan
This discussion has been closed.