Using dynamic vertical sizing with scroller and bootstrap 4

andrewbell

Hello,

I can't provide a link to the live page, but I can share more page code if needed. Edited for brevity, this is what I think is the most relevant code here: (https://pastebin.com/LaTbEp09 "https://pastebin.com/LaTbEp09")

To the question. I have a table that uses the scroller plugin and dynamic height based on browser size (vh). It works fine. It's on a bootstrap 4 page with a fixed sized header and footer.

The problem comes from mixing vh% sizing with fixed sized elements on the same page. When the free space between header and footer is less than 65% of the browser, I get vertical scrollbars on the browser window. When it's more than 65% I get whitespace at the end of the table. (65% is the best compromise size I've found.)

If I set scrollY to false, the browser window resizes to hold ALL the data (4000+ rows).

Is there any way to tell the table to "use the remaining space" dynamically?

colin

Hi @andrewbell ,

There's a lot going on there - it's hard to make suggestions without seeing the behaviour. You don't need to reproduce all your page - just the minimum that demonstrates the problem. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

andrewbell

@colin ,

Thanks for the pointer. I'll poke around at that and post the test case lin once I have it ready.

andrewbell

@colin ,

I have enough here to demonstrate the issue. http://live.datatables.net/vewoheli/1

The fact that the table isn't completely populated (space between last row and footer) isn't the problem. I think it's just because I'm not using ajax data.

To see the issue, reduce the browser height until the page footer almost touches the table footer. (I know the padding is a bit off). Then increase the browser height. Notice that this introduces white space between the table footer and page footer.

I understand that this problem is a result of mixing fixed size elements and the dynamic vertical height table on the same page. I just can't figure out if I'm trying to do something that's impossible or not.

In case it's not obvious, I'm don't code for a living. I just want to make this front end look prettier.

colin

Hi @andrewbell ,

Thanks for the demo - I tweaked it as there was a stray HTML tag in the javascript - see here.

I tried those instructions, but there's always a white space between the table footer and the bottom of the page. And following those instructions kept the table and the gap consistent. It might be worth looking at this thread here - this also discusses filling the container, so I suspect would be relevant to you.

Hope that does the trick,

Cheers,

Colin

andrewbell

Hi @Colin ,

I don't see any difference between your post and mine?

I did notice that the table not filling the whole container is specific to firefox. And I still see the variable sized gap between the footer and the table. Maybe that tag was this issue but I can't pick it out...

colin

Hi @andrewbell ,

Your script wasn't working - it was getting initialisation errors so the table was up and running. If you try your link, for example, you can sort by a column.

Cheers,

Colin

andrewbell

Hi @Colin,

I see it now. I was looking in the html, I missed the "in the javascript" parts.

Thanks for the help.