Thanks… done.

Hi all,

New here to the forum. I’ve been using Quasar for a while now - but when I started using the newer version 1.9.8, I seem to be having an issue with the q-toolbar/q-btn. Has anyone been experiencing this?

Image-1: Hovering over the last button normally.

Image-2: Moving past the last button highlights the first button and if I click, will activate the first button.

I’ve only made a few changes to the code after creating the project… as such:

<q-header>
	<q-toolbar>
		<q-toolbar-title>App Title</q-toolbar-title>
		<q-btn flat dense round aria-label="Comments" icon="r_comment_text" to="/comments" />
		<q-btn flat dense round aria-label="Notifications" icon="r_notifications" to="/notify" />
		<q-btn flat dense round aria-label="Account" icon="r_account_circle" to="/account" />
	</q-toolbar>
</q-header>

Anyone else getting this?

@metalsadman Thanks so much! That solved my issue. It was driving me nuts a little bit. The strange thing is that, as you can see from my images, the icon was still displaying properly. Weird.

Edit: Is there a way to mark your answer as the correct one… or solved?

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>

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.

@tof06 Ugh… I didn’t think of that. I just tried it - it works. Thanks!

Hi all,

Does anyone know if there’s a way to use a q-spinner as the icon for a q-route-tab?

I’m already using a spinning font-awesome icon, as shown below in the Moira tab, but it would be great to be able to use the q-spinner svg as an icon.

<q-route-tab to="/moira" :ripple="false" name="moira" icon="fa fa-spinner fa-spin" label="Moira (dt)"/>

Has anyone done this or have any ideas?

I figured out a nice solution:

I wrapped the two tab strips in a toolbar and just set some toolbar properties, and done. Nice.

<q-toolbar class="shadow-2" style="padding: 0; min-height: 0px; display: inherit;">
	<q-tabs class="sr-tabs" dense align="left" inline-label indicator-color="primary" no-caps style="float:left">
		<q-route-tab name="search" icon="search" label="Search" to="/candidates/search" />
	</q-tabs>
	<q-tabs dense align="left" v-model="tab" inline-label indicator-color="primary" no-caps>
		<q-route-tab icon="mail" to="/candidates/mail" exact />
		<q-tab name="alarms" icon="alarm" label="Alarms" />
		<q-tab name="movies" icon="movie" label="Movies" />
		<q-tab name="photos" icon="photo" label="Photos" />
		<q-tab name="videos" icon="slow_motion_video" label="Videos" />
	</q-tabs>
</q-toolbar>

It looks much better now:

Hi all,

I was wondering if there was a way to lock a q-tab into the first position? Or just the first q-tab? My current solution is to have two q-tabs strips next to each other, therefore, “search” is in the first q-tabs strip, and everything else is in the right-hand tabs strip. Here are the thoughts behind all this:

1. I don’t want the “search” tab to just be a button as I have it linked to my router as a q-route-tab. When it is selected it gets highlighted just like any other tab.
2. I want to always be able to have the search tab available, even if the right-hand tabs scroll horizontally.
3. The top image shows that the tab strips don’t seem to be the same height - but this can be an optical illusion and my eyes are messed up. For some reason it doesn’t look right.
4. By having 2 tab strips side-by-side I notice that the shadow-2 from the two strips are overlapping. I want to keep the shadow below the strips - I just don’t want them to overlap side-by-side.

Hence the question agian - Is there some way to lock a tab into place?

Thanks… done.

@metalsadman Thanks so much! That solved my issue. It was driving me nuts a little bit. The strange thing is that, as you can see from my images, the icon was still displaying properly. Weird.

Edit: Is there a way to mark your answer as the correct one… or solved?

Hi all,

New here to the forum. I’ve been using Quasar for a while now - but when I started using the newer version 1.9.8, I seem to be having an issue with the q-toolbar/q-btn. Has anyone been experiencing this?

Image-1: Hovering over the last button normally.

Image-2: Moving past the last button highlights the first button and if I click, will activate the first button.

I’ve only made a few changes to the code after creating the project… as such:

<q-header>
	<q-toolbar>
		<q-toolbar-title>App Title</q-toolbar-title>
		<q-btn flat dense round aria-label="Comments" icon="r_comment_text" to="/comments" />
		<q-btn flat dense round aria-label="Notifications" icon="r_notifications" to="/notify" />
		<q-btn flat dense round aria-label="Account" icon="r_account_circle" to="/account" />
	</q-toolbar>
</q-header>

Anyone else getting this?