Horizontal Scrolling Problems

gboysko

Hello:

I have a DataTables 1.9.0 table which is being rendered from a JavaScript source. This table resides within a 3 column page (whose columns are sized as a fixed percentage of the overall page width). The table in question is much wider than the column is sized for and as such, it overflows into the next column.

I have experimented with several different settings for bScrollCollapse, sScrollX and sScrollXInner, but to no luck.

In no cases have I been able to show a horizontal scroll bar. The table simply flows into the next column.

In Chrome, if set the dataTables_scroll table to a fixed width and set overflow to auto, then I get what I believe is the correct rendering of the table. I am unable, however, to cause this to happen through any of the above settings.

I don't know if I'm missing something here. If If you believe what I'm doing should just simply work, I'll do more work to reproduce the problem outside of my application in DataTables live or JS Fiddle.

Thanks,
Glenn

gboysko

Hello:

I believe the problem may be related to where the table resides within one of these columns. If the Data Tables is directly inside a column, then the sScrollX property (when set to "100%") works great.

When the table is inside a Field Set, which is inside a column, then the table content overflows.

I wrote a test case to reproduce this.

http://jsfiddle.net/GbuKH/3/

It may be that field set element is not constrained by the column it resides in. Perhaps all that is necessary for the DataTables implementation to work properly.

Sorry if this problem is unrelated to Data Tables.

Thanks,
Glenn

gboysko

FWIW, the sample works fine in IE9, but fails to work "properly" in Chrome 22 and FF 12.