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

[morgosh]

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

[morgosh]

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

[peppicus]

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.

[alsolee]

@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>

[aminadarwish]

@morgosh thaaaank yoooooou

[blackcodetavern]

I still have the problem even with the code from alsolee. But I append new tabs for my users dynamically. When i resize the component it works. Is there some other way to trigger an update of the q-tabs?

[metalsadman]

Tried Vue.forceUpdate() method. Anyway some reading https://michaelnthiessen.com/force-re-render.

[metalsadman]

Update: Example for those who might stumble upon this, using the article I linked above in my last comment (the key way, which the author states is the very best way).
https://codepen.io/metalsadman/pen/wvvjepy?editors=1011