Make virtual list to use all parent height about vue-virtual-scroll-list HOT 8 CLOSED

I achieved this quite simply by using flexbox. Parent style:

.parent {
  display: flex;
}

and a class for the virtual scroller:

.list {
  flex: 1;
}

Just need to set :remain generously.

from vue-virtual-scroll-list.

Generally speaking, this component only support fixed height for scroll offset calculation.

But there is a way by changing remain and size to stretch dynamic height.

from vue-virtual-scroll-list.

Hmm... Not the most convenient solution, but it works.
Thanks for your help!

from vue-virtual-scroll-list.

But there is a way by changing remain and size to stretch dynamic height.

@tangbc Do you have an example of this way of achieving this? I've tried reading the window's height programmatically and substracting the right values based on it's surrounding elements, but that's far from ideal nor does it work properly.. 😞

from vue-virtual-scroll-list.

@rijkvanzanten, here is a very simple unoptimized example: https://codesandbox.io/s/lyv8pqyl69.
Maybe @tangbc can provide a better solution, though.

from vue-virtual-scroll-list.

Ahhhhhh you use the parents height instead of the window. That makes way more sense. Thanks 🙂

I think this would be a very nice addition to have in the plugin by default if that's possible somehow. Either way, this works for me 🎉

from vue-virtual-scroll-list.

My above solution doesn't work well when trying to implement a custom scrollbar.

The problem is that Remain must be set, yet a very common use case involves using the parent's height because of responsive layouts.

from vue-virtual-scroll-list.

@ocassio your items are fixed height, what if each item has a different size, what is remain and size then?

from vue-virtual-scroll-list.