3

I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.

react-virtualized window scroller

Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.

with sticky footer - cannot see more than 1 page of data

The structure of my container page is the same as the create-react-app template: 

<div className="App">
    <div className="App-header" />
    <div className="App-intro" />
    <div className="App-footer" />
</div>

and here is the CSS I use to freeze the header and footer:

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.App {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.App-header, .App-footer {
    flex-shrink: 0;
}
.App-intro {
    flex-grow: 1;
    overflow-y: auto;
}

FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.

I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.

AmigaAbattoir
  • 632
  • 8
  • 21
kewlking
  • 412
  • 1
  • 4
  • 11
  • Link to a repro? You've only shared CSS so it's hard to trouble shoot. Throw something up on CodeSandbox. – bvaughn Sep 20 '17 at 15:13
  • @brianvaughn, thanks so much for your reply. Please find the repro at https://codesandbox.io/s/52j0vv936p Line 4 in App.js - import './flex.css', brings in the flex styling. Commenting it out will show proper functionality. – kewlking Sep 20 '17 at 17:16
  • > FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end. When I visit the example, I don't see a frozen header. I'm trying to achieve what you are describing here and would like to find an example that actually uses WindowScroller. – codd Apr 16 '18 at 10:40

1 Answers1

6

In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.

The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:

Why is my AutoSizer setting a height of 0?

AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.

Community
  • 1
  • 1
bvaughn
  • 13,300
  • 45
  • 46