Virtual List List Height

1

Does anyone have an example of how to determine the height of a virtual list item from a long list of items with different heights?
thankx

2

There is a function that you can return height for each item i think in the docs …

3

I dont know how to use it :frowning:

4 
let myList =  ".searchbar-found";
let childNo = 0;
this.$f7.virtualList.get( myList ).$itemsWrapEl.children()[ childNo ].offsetHeight
5

I can’t get it to work?
Could you be so kind as to see what i’m doing wrong?
:slight_smile:

var items = [];
for (var i = 1; i <= 10; i++) {
  items.push({
    title: 'Item ' + i,
    subtitle: 'Subtitle ' + i,
	IMAGESIZE : Math.floor(Math.random() * 31) + 90,
  });
}

var virtualList = app.virtualList.create({
  el: '.virtual-list',
  items: items,
  searchAll: function (query, items) {
    var found = [];
    for (var i = 0; i < items.length; i++) {
      if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
    }
    return found; //return array with mathced indexes
  },
  itemTemplate:
	'<li>' +
	'<a href="#" class="item-link item-content">' +
	'<div class="item-media"><img  src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" height="{{IMAGESIZE}}"/></div>' +
	'<div class="item-inner">' +
	'<div class="item-title-row">' +
	'<div class="item-title">{{title}}</div>' +
	'</div>' +
	'<div class="item-subtitle">{{subtitle}}</div>' +
	'</div></a></li>' +
	'<li>',
		  height: function (item) {
			let myList =  ".searchbar-found";
			let childNo = 0;
			this.$f7.virtualList.get( myList ).$itemsWrapEl.children()[ childNo ].offsetHeight;
			return 63;
		  }
});
6

just test it:

this should work

// 16 is padding-top/bottom sum
return item.IMAGESIZE + 16;

jsfiddle

7

Hey!!! This is great! Much appreciated, helps me understand the framework…
BUT, when I add the ‘media-list’ class to the div tag, it breaks…
Here’s and example… https://jsfiddle.net/0ryucLt8/

Thanks in advance!

8

just add the padding of item-media;

item.IMAGESIZE + 16 + 10 <---- new item media padding

1 Like
9

padding doesnt work, breaks the rendering.
Take a look at Item 10 in the list https://jsfiddle.net/0ryucLt8/

.

Capture
Capture752×244 13.1 KB

10

You forgot to add the + 10 suggested by @pvtallulah
In the jsfiddle i added and looks great.

return app.virtualList.get( '.virtual-list' ).$itemsWrapEl.children().length ? app.virtualList.get( '.virtual-list' ).$itemsWrapEl.children()[ childNo ].offsetHeight : item.IMAGESIZE + 16 + 10;

11

it does work, but, i see where the problem is: my information is random, so it breaks when searching or rendering.

Take a look at this example: https://jsfiddle.net/5zbf14cL/1/

if you could get this to work, that would be great! :):slight_smile:

12

this is a horrible solution, but it works, so if you want to use it you can.

jsfiddle