Virtual List adds unwanted space between rows

1

I have this virtual list of about 1200+ items and problem I am having is huge space between rows. In VL list I have provided height and also setting height in flex box item CSS. It seems as VL is adding space between rows and space gets increased as I scroll down. Is it a bug or I am doing something wrong in settings?

Thanks for help.

VL code:

el: '.virtual-list',
                    cols: 3,
                    createUl: false,        
                    rowsBefore:50,
                    rowsAfter:50,
                    cache:false,
                    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);
                    if (items[i].sku.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
                      }
                      return found; //return array with mathced indexes
                    },
                itemTemplate:
                  //https://blog.fullstackdigital.com/how-to-create-a-flawless-responsive-post-grid-with-flexbox-e5c7cc9d28e  
                  '<div class="grid-item">' +
                    '<a class="wrapping-link" href="/catalog/{{id}}/"></a>' +    
                    '<div class="grid-item-wrapper">' +
                      '<div class="grid-item-container">' +
                        '<div class="grid-image-top">' +
                          '<span class="centered project-image-bg"><img class="p-img" src="{{image}}"/></span>' +
                        '</div>' +
                        '<div class="grid-item-content">' +
                          '<span class="item-title">{{title}}</span>' +
                          '<span class="item-sku">{{sku}}</span>' +
                          '<span class="item-price">Price: £{{price}}</span>' +
                          '<span class="item-pack-size">Pack Size: {{qtypp}}</span>' +
                        '</div>' +
                      '</div>' +
                    '</div>' +
                  '</div>',
                  height: 320

CSS:

.container {
  justify-content: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  flex-basis: 33.33%;
  height: 320px;
  -ms-flex: auto;
  width: 250px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.grid-row a {
  text-decoration: none;
}

.wrapping-link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  color: currentColor;
}

.grid-item-wrapper {
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  background: #ececec;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
  transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}

.grid-item-container {
  height: 100%;
  width: 100%;
  position: relative;
}

.grid-image-top {
  height: 75%;
  width: 110%;
  background-size: cover;
  position: relative;
  background-position: 50% 50%;
  left: -10.5%;
  top: -13%;
}

.grid-image-top .centered {
  text-align: center;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 54.5%;
  left: 50%;
  width: 60%;
  height: 60%;
  background-position: center;
}
2

https://framework7.io/kitchen-sink/core/
console:

var $$=Dom7;
var html='<div class="row virtual-list"></div>';
$$('.view-main .page-content').html(html);
app.virtualList.create({
  el: '.virtual-list',
  cols: 3,
  height: (100/3),
  createUl:false,
  items:[...Array(1200).keys()].map(function(i){
    i++; return { 
      title: 'Item '+i,
      subtitle: 'Subtitle '+i
    };
  }),
  itemTemplate:`
    <div style="height:100px;" 
         class="col-33 display-flex flex-direction-column
         justify-content-space-evenly text-align-center">
      <div>{{title}}</div>
      <div>{{subtitle}}</div>
    </div>`
});
1 Like
3

Thanks plpl,
100/3 for height helped and it seems issue is with height and padding. If I change my code and remove padding it fixed the issue it seems. Does that mean I have to compensate padding in height?

4

no
but i can see the issue
for now use:
(100/4)
later i’ll see what’s going on

5

Actually height should be a height of single item, so here is the correct code:

var $$=Dom7;
var html='<div class="row virtual-list" style="align-content: flex-start"></div>';
$$('.view-main .page-content').html(html);
app.virtualList.create({
  el: '.virtual-list',
  cols: 3,
  height: 100,
  createUl: false,
  items:[...Array(1200).keys()].map(function(i){
    i++; return { 
      title: 'Item '+i,
      subtitle: 'Subtitle '+i
    };
  }),
  itemTemplate:`
    <div style="height:100px; position: relative;" 
         class="col-33 display-flex flex-direction-column
         justify-content-space-evenly text-align-center">
      <div>{{title}}</div>
      <div>{{subtitle}}</div>
    </div>`
});
6

Thanks for replies guys, really appreciate your help.

Height and padding fixed issue of gap between items but now when I scroll down to the bottom screen starts to fliker and jump. I have crated video of issue.

What could be causing this?