Virtual list "cols" not working

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
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.

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

1 Like

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 
       (2)  the inline style "align-content" to fix problem of empty spaces between rows 
  <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;"> 

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
      height: 150,         // tell virtual list what the height of each item is going to be
      itemTemplate: ...    // reference to the item template listed above