ColVis with alternative styling format error with filtering

sylvaint

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.

sylvaint

Problem with Firefox 5.0, ok with Chrome and Safari.

sylvaint

I take that back, problem is with Chrome also. Reproduced it with Chrome with one of my program.

allan

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

sylvaint

I am using ColVis 1.0.6.dev

allan

Are you using DataTables 1.8.2.dev?

sylvaint

No, 1.8.1
Do I have to use 1.8.2.dev ?

allan

If you want that particular problem to be fixed. As I noted it is fixed in the DataTables nightly.

Allan

sylvaint

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.

sylvaint

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.

allan

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

sylvaint

With bScrollAutoCss false and

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

I get the same thing.

sylvaint

This one with overflow: scroll behaves differently but still wrong.

sylvaint

Trying to get it to work with overflow-y auto.

allan

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

sylvaint

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 :-)

allan

[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

sylvaint

Thanks Allan, I am happy with using overflow-y scroll.

Cheers.

allan

Awesome - good to hear :-).

Regards,
Allan

p.s. Love your use of DataTables - very nicely done!

sylvaint

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.

sylvaint

Works fine in Firefox 5 with bScrollCollapse false.
Perfectly happy with that !!!

allan

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