If VirtualScroll is wrapped inside AutoSize dragging an item doesn't trigger scroll
See original GitHub issueAwesome job @clauderic 👍
I’m having a huge list that I’m using react-virtualized
but if I want the width to be dynamic, for this I must wrap it with AutoSize
You should already know this 😊
class VirtualList extends Component {
render() {
const { items } = this.props;
return (
<AutoSizer disableHeight>
{({ width }) => (
<VirtualScroll
ref="VirtualScroll"
estimatedRowSize={70}
rowHeight={70}
rowRenderer={({ index }) => {
const { product } = items[index];
return <SortableItem index={index} product={product} />;
}}
rowCount={items.length}
width={width}
height={500}
/>
)}
</AutoSizer>
);
}
}
So when I do, I lose the ability to scroll while dragging & item, any hints how to fix this?
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
virtual-scroll: support items of unknown size #10113 - GitHub
Support virtual scrolling over a list of items whose size is not known and needs to be measured.
Read more >Cdk virtual scrolling issue - angular - Stack Overflow
I had a situation where the virtual scroll's viewport was in a flex-box, so it needed to respond to what the flex's layout...
Read more >overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
Read more >NGrid: Strategies
And a special vScrollNone strategy which disable virtual scrolling. You can ... When the height of the rows are not equal, using fixed...
Read more >Scrolling | Angular Material
Virtual scrolling is different from strategies like infinite scroll where it renders a set amount of elements and then when you hit the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Managed to solve it by wrapping the
<Sortablelist>
itself with<AutoSizer/>
and passing the width to the<VirtualScroll />
Thank you for this Issue thread, it fixed my issue. I suggest adding this to the docs somewhere as I only found this fix thanks to Google after reading through the docs and examples.