How do you make dataTable height fit the remaining height available, no y overflow?

rtman

Hi,

I'm trying to get dataTable to fit the remaining height available on a screen with the option scrollY: '100%' (without y overflow). But it doesn't appear to be working, I always have y overflow.

Please have a look at this test case:

I've tried a number of options including modifying css classes like .dataTables_wrapper .dataTables_scroll and .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody to include a height: 100%; but that still allows for an overflow in the y direction.

If I set a pixel value for the height it responds as you would expect and constrains the height properly. As I understand it a height percentage should be based on the parent element, in this case everything is set to height: 100% so it should work?

Best,
Ryan

colin

Hi @rtman ,

This blog post here should help, I think it's discussing what you're after,

Cheers,

Colin

rtman

Hey @colin ,

That looks like it would work but when I implement it I see no change? Have a look here . Am I doing something wrong? The table continues to overflow beyond the container.

This example is basically what I'm aiming for.

rtman

I feel like the docs are incomplete regarding this feature?

I see mention of adding a resize wrapper but there is no code to show what that is or what its attributes should be.

This live example I found in the forums hacks in its own resize wrapper attached to a div id, it seems to work but this isn't the real way to accomplish this is it?

Are there extra steps to get this running other than importing the script and setting scrollResize: true ?

colin

Hi @rtman ,

This thread here seems closer, using pageResize - I even got the two plugins muddled on that thread. This example came here from that thread. Can you see if that works better, and if not, we'll go back to your previous question,

Cheers,

Colin

rtman

Hey @colin ,

pageResize won't work for me as the requirements state you need:

Paging must be enabled (paging - it is by default in DataTables)
Page length change must be enabled (lengthChange - again it is by default)
Every row must be of equal height - add the class nowrap to your table if you are using the DataTables default stylesheet. This is to make the fitting calculation fast and efficient.

I am going with an vertical scroll layout (no pagination) and my row heights may not be equal.

I ended up putting a <div id={'resize_wrapper'}> around the dataTable and using the following css

#resize_wrapper {
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 12em;
    box-sizing: border-box;
}

Seems to be working well with scrollResize, is this how its supposed to be done? If so the docs do not state this well.

allan

Hi,

Seems to be working well with scrollResize, is this how its supposed to be done?

Yes - spot on. You need to define the container that the resize component will match to. It can't know how large you want the fit to be (whole page, a small container, etc?), so you need to explicitly have the container element set to be the height that you want it to be.

It doesn't need to be the _wrapper element, it just needs to be a container element - I normally use the one just above the wrapper.

Regards,
Allan

radcapitalist

In my situation, with pageResize, the table is showing 10 rows even though there is much more room in the browser. And if I make the browser window smaller than the table, nothing changes. So I guess if I want the table to fill the space available in the browser window, it is up to me to catch window resize events and resize the container, and then the table will resize?

Thanks,

Eric

allan

If you could give me a link to your page, I'll take a look and see if I can spot what is going wrong.

So I guess if I want the table to fill the space available in the browser window, it is up to me to catch window resize events and resize the container, and then the table will resize?

Correct. Well sort of! Its up to you to define the area you want the DataTable to draw in. You could use a resize event to handle that - but I'd normally just use CSS to do it.

Allan

radcapitalist

Unfortunately my page is behind a firewall. But I've made some progress. I'm using CSS instead of events to control the heights of the divs in which the table lives. Now, my problem is just on initial page load. All of the divs that I control the height of are taking up the full height of the window, but the dataTables_wrapper div is not. If I resize the window, after load, dataTables_wrapper grows to full height and all is well thereafter. Any idea what could be hosing me up on initial page load? Doing something in the wrong order maybe?

Thanks!

Eric

Davidsmrz

Hello @allan, scrollResize works fine but I have a problem when I´m using bootstrap with row - col classes.

I think the problem is in position:absolute from col class. What do you thing?

http://live.datatables.net/zelezobo/1/edit?html,css,js,output

allan

Yes - because you have the table inside a col-sm-12 which has position: relative' it means your resize_wrapper element. You could override that position to workaround it: http://live.datatables.net/zelezobo/2/edit .

Allan