virtual scroll table does not show some rows

[Claus1]

After quasar upgrading from 2.3xx to 2.6 I noticed some rows are not visible in my tables which use the same codebase.

My attempts to fix it were unsuccessful. No errors in console. In my code I made auto designer which 1) load data to a table, 2) change its size to appropriate rows size. When I start to scroll all rows appear. How to fix?

My table:

<template lang="pug">   
q-table.my-sticky-virtscroll-table(virtual-scroll  dense :style="styleSize" flat :filter='search' ref='table'
  :rows-per-page-options='[0]' :virtual-scroll-sticky-size-start='48' row-key='iiid' :title='name' :rows='rows'
    :columns='columns' :selection="singleMode ? 'single': 'multiple'" v-model:selected="selected")
  template(v-slot:top-right )    
    div(v-if='data.tools !== false')
      .row
        q-input(v-model="search" label='Search' dense)
          template(v-slot:prepend)
            q-icon(name="search")
        div
          q-btn( dense rounded  icon="select_all" no-caps @click="showSelected")
            q-tooltip.text-body2 Show selected
          q-btn( dense rounded  icon="deselect" no-caps @click="deselectAll")
            q-tooltip.text-body2 Deselect all
          q-btn( dense rounded icon="delete_forever" no-caps @click="delSelected" v-if="'delete' in data")
            q-tooltip.text-body2 Delete selected
          q-btn( dense rounded :icon="singleMode ? 'looks_one': 'grain'" no-caps @click="switchMode" v-if="data.multimode !== false")
            q-tooltip.text-body2 Multi-single select mode
          q-btn( dense rounded :icon="editMode ? 'cancel': 'edit'" no-caps @click="switchEdit" v-if="editable")
            q-tooltip.text-body2 Edit mode
          q-btn( dense rounded icon="add" no-caps @click="append" v-if="editable && 'append' in data")
            q-tooltip.text-body2 Add a new row
          q-btn( dense rounded icon="insights" no-caps @click="chart" v-if="'view' in data")
            q-tooltip.text-body2 Draw the chart
            
  template(v-slot:header="props")
    q-tr(:props="props")
      q-th.text-italic.text-purple(v-for="col in props.cols" :key="col.name" :props="props") {{ col.label }}
                
  template(v-slot:body='props')
    q-tr(:props='props' @click.native="props.selected = !props.selected")
      q-td(v-for="col, icol in columns" :key='col.name' :props='props')
        q-checkbox(v-model="props.row[col.name]" dense  @update:model-value='change_switcher(props.row, col.name, icol)' 
          v-if="typeof props.row[col.name]=='boolean'" :disable='!editMode')            
        q-select(dense :model-value="props.row[col.name]" use-input hide-selected fill-input autofocus outlined borderless
          @input-value ='change'  hide-dropdown-icon  input-debounce="0"  :options="options"
             @filter="complete" @keydown="keyInput" 
               v-else-if="editMode && 'complete' in data && icol == cedit && redit == props.row.iiid")
        q-input(v-model="props.row[col.name]" dense @keydown="keyInput" autofocus 
          @update:model-value='change' v-else-if='editMode && icol == cedit && redit == props.row.iiid')      
        div(v-else @click.native ='select(props.row.iiid, icol)') {{props.row[col.name]}}    
</template>

[pdanpdan]

Can you please make a codepen that can reproduce the problem?

[Claus1]

@pdanpdan It is difficult. Why open onscreen items are not visible? In which cases? this.$refs..$refs.virtScroll.refresh(-1) does not help for update even with delay 1000 ms.

[Claus1]

I think virtual items do not reflect to changing table size by changing its container size. After that rows stay invisible. v 2.3 worked correct. Now not. How to fix it?

[pdanpdan]

You can try to force more items to be rendered using the virtualScrollSliceSize prop.
Maybe the detection is wrong.
Please try and tell me if it fixes for you, so I can put the blame on detection and see what we can do.

[Claus1]

Yes, virtualScrollSliceSize helps. The table use dense mode, Possibly the reason is there ) Thanks!