Handsontable not rendering properly inside a q-tab-panel

Question

I have some quasar panels with some content inside. One of these contents is a handsontable but it is not rendering correctly. At the beginning of the code I perfectly render a handsontable into a q-card.

Well drawn handsontable

The exact same piece of code is drawn incorrectly if I put it inside a q-tab-panel.

Incorrectly drawn handsontable

This is the whole code of my vue component

<template>
  <q-page padding>
    <q-card class="q-pa-md q-mt-lg">
      <div id="example1" class="hot">
        <hot-table :settings="hotSettings"></hot-table>
      </div>
    </q-card>
    <q-card class="q-pa-md q-mt-lg">
      <q-tabs v-model="tab">
        <q-tab v-for="tab in tabs" :key="tab.name" v-bind="tab"/>  
      </q-tabs>
     <q-tab-panels v-model="tab" animated>
        <q-tab-panel v-for="tab in tabs" :key="tab.name" :name="tab.name" class="q-pa-none">
          <h5>{{tab.name + " content"}}</h5>
          <div id="example1" class="hot">
            <hot-table :settings="hotSettings"></hot-table>
          </div>
          <div v-for="n in 5" :key="n" class="q-my-md">{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</div>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </q-page>
</template>

<script>
import { HotTable } from '@handsontable/vue';
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';

export default {
  components: { HotTable },
  name: 'somename',
  data () {
    return {
      tab: 'tab1',
      tabs : [
              { name: 'tab1',    label: 'tab 1' },
              { name: 'tab2',    label: 'tab 2' },
              { name: 'tab3',    label: 'tab 3' },
              { name: 'tab4',    label: 'tab 4' }
              ],
      hotSettings: {
        data: Handsontable.helper.createSpreadsheetData(6, 10),
        rowHeaders: true,
        colHeaders: true,
        renderAllRows: true
      },
    }
  }
}
</script>

What should I do to get the same result from the start of the code inside the tab panels?

Answer 1

The problem was that I was not specifying the height of the handsontable and therefore it was rendering with the default height within the tab-panel. Thanks to https://github.com/hawkeye64 for the answer (https://github.com/quasarframework/quasar/discussions/8726#discussioncomment-570628)

Solution: add: height:200 to hotSettings