scrollResize plugin grows but doesn't shrink

scrollResize plugin grows but doesn't shrink

dtfan4584dtfan4584 Posts: 2Questions: 1Answers: 0

Link to test case: https://live.datatables.net/dtfan4584/1/edit
Debugger code: https://debug.datatables.net/ubobuy
Error messages shown: (none)
Description of problem:

I want to use the scrollResize plugin to make DataTables in several sections responsive to user-controlled changes in the section size (layout-in versus content-out sizing).

This works great when expanding a section, but not when shrinking - the DataTable grows but doesn't shrink.

My web page is a fixed size with top and bottom sections, and the user can vary the size of these sections. Inside the bottom section are nested two more sections which are also resizable by the user. So there are three sections. In each section is a table (plus some fixed headers and footers) - but I've commented out the tables in the last two sections because the scrollResize doesn't seem to be working in the first section.

To reproduce this problem:
* Click on the output panel and press and hold the 's' key (see prompts on page).
* At around 40% the div starts growing (and the table with it).
* But if you release 's' and press 'a', the scrollResize seems to be preventing the div from shrinking.
* This can be verified by commenting out the table, and then the div shrinks.

I also noticed that if the browser window doesn't have enough width, the page just gets bigger by itself - is that also a scrollResize bug? My screen is 2560px wide and I have to turn off console panel to prevent this.

Is the problem with not shrinking a scrollResize bug?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,722Questions: 1Answers: 10,108 Site admin
    Answer ✓

    Took me a while to figure this out, but it appears to be that grid rows do not automatically handle content that overflows. That causes problems for ScrollResize since it things the height of the display area isn't changing!

    This SO thread on the matter is very instructive.

    Adding this CSS to your example allows it to work:

    div.grid-full-height,
    div.resizable {
      min-height: 0;
    }
    

    Phew! Interesting one that - I haven't done much with grids before.

    Allan

  • dtfan4584dtfan4584 Posts: 2Questions: 1Answers: 0

    Thank you!

Sign In or Register to comment.