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
    1. Home
    2. Manolo
    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 2
    • Best 0
    • Groups 0

    Manolo

    @Manolo

    0
    Reputation
    1
    Profile views
    2
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Manolo Follow

    Latest posts made by Manolo

    • RE: Handsontable not rendering properly inside a q-tab-panel

      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

      posted in Help
      M
      Manolo
    • 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.

      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?

      posted in Help
      M
      Manolo