Variable Height Y Scrolling

dmclean

I used to have this line in my data tables call:

"sScrollY":"600px",

but the users complained that sometimes it was too large and sometimes it was too small. Is there a way to turn on Y scrolling but with floating size so that it uses whatever screen real estate is available?

Thank you,

Donald

allan

Hi Donald,

Currently, no - there is no built in way in DataTables to have it use a flexible height, primarily because its not trivial to do in CSS and I don't want to force a particular layout on developers using DataTables.

Having said that, it is quite possible to manipulate the DOM elements that DataTables uses to make use of the space that is available, if the CSS is appropriately set up. It all revolves around manipulating the `div.dataTables_scrollBody` element - specifically its height. There are two ways to approach it:

1. Set the height specifically with a little Javascript calculation
2. Set the height to auto and add bottom:0 to its CSS style - forcing it to match the height of the container element.

The second is useful if you have specifically set your page up for that method, however the first is typically easier to use, although slightly more expensive in terms of processor clock cycles, simply because more calculations need to be done.

I've put together an example for the first method here:
http://live.datatables.net/uvinax/edit#preview

Resize the window and you'll find that the DataTable reflects the window - obviously the exactly setup you use would be different, but the basic principle can be applied.

Hope this helps!

Regards,
Allan