[solved] q-tabs don't go "scrollable" in simple div without setting div's width explicitly



  • Hi all,

    I have an issue. If I put my (horizontal) q-tabs component into a simple div, without setting the div’s width explicitly, the q-tabs component never goes into “scrollable” mode. Is there a way of doing this that I may be missing, without having to set the simple parent div’s width?

    Edit: I’ve noticed that the q-tabs control gets a class of q-tabs–not-scrollable. I’ve looked through the quasar code a little bit trying to figure out why - so far, I’m not seeing it.



  • I’ve solved the issue, sort-of. The following what I had to do:

    <!-- Outer qbar (or div) class is ROW / Inner item class is COL or COL-AUTO -->
    
    <q-bar class="row">
    	<q-btn dense flat stretch class="col-auto" icon="menu_open" />
    	<q-separator vertical />
    	<q-tabs v-model="tab" no-caps dense inline-label align="left" class="col">
    		<q-tab v-for="(n, index) in 12" name="mails" icon="mail" label="Candidate" />
    	</q-tabs>
    	<q-separator vertical />
    	<q-btn dense flat stretch class="col-auto" icon="menu_open" />
    </q-bar>
    

Log in to reply