Virtual list "cols" not working

Questions
1

Hi, I am unable to get the core virtual-list component to display more than one item per row.

Am referring to the docs at https://framework7.io/docs/virtual-list.html#virtual-list-parameters
From there it seems, just setting “cols” parameter to 2 (for example) will get the job done.

I tested by modifying the kitchen sink example and there is no luck ! The list still has only one item per row.

Thanks in advance for the help.

2

You also need to add actual styles to list items so they are displayed in 2 cols

1 Like
3

Thank you; that’s exactly the advice I needed.

For reference: I was able to get a 2 column grid by adding styles as commented below.

For the virtual list container:

  <!-- virtual list container uses:
       (1)  the row class from the grid utilities 
            https://framework7.io/docs/grid.html 
       (2)  the inline style "align-content" to fix problem of empty spaces between rows 
            https://stackoverflow.com/a/40890703/5412249 
   -->
  <div class="list virtual-list row" style="align-content: flex-start;" />

For the item template:

    <!-- col-50 class from the grid utilities ensures each item 
         takes half the width -->
    <div class="col-50" style="height: 150px;"> 
      <div>{{name}}</div>
    </div>

While creating the list I used the following parameters:

    var vlist = this.$app.virtualList.create({
      el: '.virtual-list',
      cols: 2,             // tell virtual list how many columns are going to be there so that it can adjust it's height calculations correctly 
      createUl: false,     // to disable <ul> <li> items from being rendered
      items,
      height: 150,         // tell virtual list what the height of each item is going to be
      itemTemplate: ...    // reference to the item template listed above 
    });