How to turn off the GOD D*** horizontal scroll bar

bidon

I'm forced to use the stupid veritcal scrollbar feature and it adds overflow-auto to sScrollBody. That's all well and good, but the dual table nature this causes adds a horizontal scrollbar to the actual table. I've used the class override and set overflow-x: hidden, however it always gets trumped by JavaScript later. I've obvsiously tried element.css("overflow-x: hidden") and it still doesn't work.

How in the hell does one get rid of this? I don't care if it is right or wrong or not allowed. Hack or otherwise, I want it gone. I don't want a horizontal scroll bar from an extra 2px this double table BS is causing.

allan

It would be really useful if you were to post a link to an example page showing the problem. My guess is that there is a border or something on the elements which is forcing the scrolling.

However, you might be interested in this property: http://datatables.net/ref#bScrollAutoCss - it will stop DataTables automatically adding the styling for the scrolling, allowing you to do what you want with the styling (scroll-y only I assume).

Allan

bidon

Part of the problem is that since you need two tables for the yScroll, you copy the rows in THEAD from the header table to the data table.

We use JS to dynamically add rows in that THEAD. Basically for filtering like the plugin, and customized headers.

You then copy those rows and attempt to hide (probalby with a height of 1 px). That doesn't really work, it makes an ugly line. It also causes a horizontal scroll bar for some reason. If I firebug delete this extra THEAD row you dupe, the scrollbar goes away.

Any ideas?

allan

I suppose you could use fnDrawCallback to remove the extra cloned header, but it seems like a bit of a work around really... DataTables should try to make the rows in the header 0px (although I have found that one or two browsers have have problems doing that). It is possible that something more can be done to enforce that - if you have a link to a page showing this problem, that would be really useful.

Allan

bidon

That resolves one problem, but just brings up another.

I'm trying to get the table to never have a horizontal scroll bar. I limit the columns in my table, and don't care if they have a shitty monitor.

The y scroll works, but when a vertical scroll bar exists you can't see part of the far right column. So the table adds a horizontal scroll bar to the DIV to see behind the vertical scroll bar. Stupid.

So, again, shouldn't there be a mechanism to override the CSS for the div with the class "dataTables_scrollBody"? I just want to set overflow-x to hidden. Every attempt or hack at any point gets trumped later.

This vertical scroll feature is clearly the weakest link in an otherwise great control. If you have any last minute thoughts, let me know.

For now I modified the original source, which I'd prefer not to do. Appears to be working as desired.

allan

Setting http://datatables.net/ref#bScrollAutoCss to false would allow you to do that. With that you are under full control of the scrolling styling that is added to the scrolling container, so if you want overflow-x: hidden, then you would just put that into the CSS :-)

Allan