No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Handsontable not rendering properly inside a q-tab-panel

    Help
    2
    3
    167
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Manolo last edited by

      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 Well drawn handsontable

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

      Incorrectly drawn handsontable 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?

      dobbel M 2 Replies Last reply Reply Quote 0
      • dobbel
        dobbel @Manolo last edited by

        @manolo

        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:

        https://github.com/quasarframework/quasar/discussions

        1 Reply Last reply Reply Quote 0
        • M
          Manolo @Manolo last edited by Manolo

          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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post