q-tabs not horizontally scrollable until changing window width on desktop



  • On default it is not scrollable but when you change window width it adds some class called “scrollable” to element inside q-tabs, which then enables rendering of the arrows. The scrollable class has no css though.
    Example of error:
    https://gyazo.com/e2fe9ae92ea5225a8cc12bdf2265efed



  • Just realized what the problem was. The q-tabs component checks the width of all q-tab that are existing when the component is mounted, and it checks everytime the screen size changes. But while my dates are added dynamicaly after the q-tab mount ( when the server responds), the q-tab did not notice length was now actually bigger even though window size did not change. I added v-if so q-tabs is now loaded after the dates loaded and now it works properly



  • Hi morgosh you added v-if, but wich variable do you check?
    I’m trying to check the length of vector but it doesn’t seems to work.

    tnks in advance.



  • @peppicus u can use v-if and v-else both. like this:

    <q-tabs class="fit" color="indigo" inverted swipeable v-model="selectedTab"  v-if="views.length" v-show="views.length" >
          <q-tab :name="v[0]" slot="title" v-for="v in views" :key="v[0]">{{v[1]}}</q-tab>
          <q-tab-pane class="fit no-padding" :name="v[0]" v-for="v in views" :key="v[0]" ref="panes">
            <instance-view :id="id" :vid="v[0]" :modal="modal"/>
          </q-tab-pane>
        </q-tabs>