Allow to force remove q-tabs--not-scrollable on any width

[renaudham]

Is your feature request related to a problem? Please describe. Currenlty I have a Qtabs on a page of 1300px, with tabs list width to arround 1400px --> The content of a part of the tabs is hidden, and we dont have arrows visible to scroll

BUt there is no way, and I checked Tabs source to see, to have the arrows visible if $q.platform.is.desktop && width of container > 1024px

This is a major issue and really need to be modified, to allow with a Props

Describe the solution you'd like Add a props, for example "forceScrollArrows" Boolean, so we could have the scroll and arrow as soon as the tabs list content is bigger than the container, and avoid hidden tabs

[pdanpdan]

Sorry, but I don't understand your problem. What quasar version? Please make a codepen showing your problem (if it need special conditions to reproduce put them as text in the codepen).

[hawkeye64]

It sounds like QTabs never shows the arrows when the screen width is greater than 1024, even if the number of tabs exceeds the visible width.

[hawkeye64]

I am not seeing the issue: https://codepen.io/Hawkeye64/pen/XWaMzZy?editors=1010

This is my current screen resolution:

[renaudham]

HI I tried with same styling and precising the case below https://codepen.io/renaudham/pen/VwzpJMo?editors=1000 I have special styles that I added and it was with specific max width and in position fixed

then also it was appearing onlmy when the number of tabs was just a little bit more than needed to be just a little bit more than the fixed width. It was working if I add much more tabs.. and without toolbar, and using router tab

So if I do the same case for tabs alone, not in my page, the codepen above seems to work..

But in my page the data are coming dynamically, after on onMounted, the model get a store

        themes.value = store.state.themesStore.themes

that's maybe the reason or maybe it could be because of the page overall

BUT, in the test on codepen I see that after my last tab, (8th named tab7) there is a large right space, that is not on my page version

SO I added a live demo page of the real issue case https://fixr2022demo1.bod-demo.fr/user/antoine_colin and the component related is attached

themesTabs.zip

thanks

[renaudham]

adding to previous comment

the page holding the tab component has the following block to add the tabs

<!--ARTICLES LIST -->
      <div v-if="page === ''" class="= block-content special-row " style="color: #333333;">
        <div class="q-mt-md">

          <h3 class="q-pl-lg q-pr-lg" ><span>85</span> {{Words.artic.p}} </h3>
          <themesTabs  :noFixed="true" :themeLimited="true" :themeSelection="['international','culture', 'sciences']" :linkBase="'/@/' + (article.userType == 'fixor' ? article.userSlug : article.mediaSlug)"></themesTabs>
          <creatorTagsTabs class="q-mb-lg"/>

          <h5 class="q-pl-lg q-pr-lg" >24 / 68 {{Words.artic.p}}
            <span class="q-ml-xl no-bold">Filtrés "Tag : Politique" - "Thème : Nature"</span>
            <q-btn outline round size="xs" icon="close" class="q-ml-sm" color="grey-6"/></h5>
          <div  class="q-pa-lg" >
          LISTE DES ARTICLES filtrables par tag
          </div>
        </div>
      </div>
      <!--END ARTICLES LIST -->

[rstoenescu]

Hi,

Cool website! Use mobile-arrows prop (assuming u're on Qv2?). That makes arrows always show on mobile.

[renaudham]

HI Already tried with mobile-arrows, it's not solving because the issue is not on mobile but on Desktop, as in the screenshot On mobile all is ok, no need arrows and the touch scroll will scroll well everything

Please reopen thanks

[hawkeye64]

Yes, very nice site. Love what you have done with it. Hopefully, someone can figure out a resolution to your issue.

[renaudham]

HI Thanks.

I had an idea and tested it 2,6457513110645905905016157536393

Apparenlty the issue is linked to the CSS, strangely

I will try to turn around, as I need this styling... But any idea welcome. You have the css visible on demo URL and in the zip..

Thanks

[renaudham]

SOLVED Apparenlty it was this .q-tab.relative-position { padding: 0 !important; margin: 0 4px !important; }

Instead I applied padding to global

.discover-themes { .q-tabs__content { .q-tab { padding: 0 6px;

      and its ok

[hawkeye64]

@renaudham Glad you got it figured out!