0

I am calculating the height of the List component using the formula: rowHeight * rowCount (in fact, I still don't understand why height is required if it can be calculated from the other two props). But it seems that the list rendered is longer than it should be.

Below is a screenshot. You see here that below the last row there's tons of empty space. enter image description here

Here's the code for the list:

       let height = rowHeight * this.state.leads.length
       items = (<div style={{minHeight: 100}}>
                    <List
                        ref={list => this.list=list}
                        height={height}
                        width={1600}
                        rowCount={this.state.leads.length}
                        rowHeight={rowHeight}
                        rowRenderer={(p) => this.rowRenderer(p, search_results)} />
                </div>)
elena
  • 3,740
  • 5
  • 27
  • 38
  • Is it really that big? Did you check the it with chrome or something like that?Height should be for the list height, where you should be able to scroll. Like if your elements are 100px and your list is 200px, it should get cut off or gets scrollable, if you have more than 2 elements in the list. But I usually use FlatList and don´t know that List component. – modmoto Jan 10 '18 at 20:17

1 Answers1

1

I think this question hints at a fundamental misunderstanding of how react-virtualized works. Check out this slide from my presentation on windowing for a high-level overview.

Put succinctly, the height property tells react-virtualized how much room it has to display a windowed slice of the overall data. If you are setting height equal to rowHeight * rowCount then you aren't windowing anything- you're displaying everything.

The react-virtualized docs are pretty decent (I think) about explaining props and their use, and showing examples which can be copy-pasted. I suggest you look at the List docs and/or the WindowScroller docs (if you want the List to fill the entire browser page).

I hope this helps clear up confusion about why the height prop is a necessary constraint.

bvaughn
  • 13,300
  • 45
  • 46
  • I think I got now the point of windowing. I've set the height to be 20 * rowHeight. However, right now I get another issue - the list is flickering when I scroll :( – elena Jan 11 '18 at 07:52
  • 1
    I don't have enough context to help with that. I suggest posting a new Stack Overflow question, and provide enough info (code examples, maybe a runnable demo or _at least_ a video showing the problem). – bvaughn Jan 11 '18 at 16:28