Virtual list not rendering

1

hi all,

when rendering an initial value to a virtual list, nothing gets shown.
copied the code from the docs. The first time it was shown, the second time no text is shown.
Similar issue to this gentleman: https://github.com/framework7io/framework7/issues/1014
The list is not created on page init, rather created as how the docs is shown. Video is available underneath the image below.

var items = [];
items.push({
    expense_name: 'No data to show',
    expense_price: ' '
  });


var virtualList = app.virtualList.create({
  // List Element
  el: '.virtual-list',
  items: items,
  // List item Template7 template
  itemTemplate:
    '<li>' +
      '<div class="item-content">' +
        '<div class="item-inner">' +
          '<div class="item-title">{{expense_name}}</div>' +
          '<div class="item-after">{{expense_price}}</div>' +
        '</div>' +
      '</div>' +
    '</li>',
});

Simulator Screen Shot - iPhone 11 Pro - 2020-08-09 at 16.09.58
Simulator Screen Shot - iPhone 11 Pro - 2020-08-09 at 16.09.581125×2436 78.4 KB

2

Set height…

4

the default height is 44px

5

Minimum JS fiddle : How to ask a good question on forum

6

the code behaves differently in a cordova environment as opposed to the web.

7

Set height on the list

height: 44,

var virtualList = app.virtualList.create({
  // List Element
  el: '.virtual-list',
  items: items,
  // List item Template7 template
  itemTemplate:
    '<li>' +
      '<div class="item-content">' +
        '<div class="item-inner">' +
          '<div class="item-title">{{expense_name}}</div>' +
          '<div class="item-after">{{expense_price}}</div>' +
        '</div>' +
      '</div>' +
    '</li>',
    height: 44, <--- add this height