Handsontable not rendering properly inside a q-tab-panel
-
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.
The exact same piece of code is drawn incorrectly if I put it inside a q-tab-panel.
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?
-
Please create a codepen.io for better support:
https://codepen.io/rstoenescu/pen/VgQbdx
Even better create a post with codepen.uo on the new Quasar forum, github discussions:
-
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
tohotSettings