Seriously… I needed specific custom functionality all over my site and q-btn-dropdown simply doesn’t cut it. But… a q-menu inside a q-btn is epic. I can do easy offsets, capture open/close events, use custom styling and content.

q-btn with q-menu is a dream to use. So, thank you!!

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?

@Graypes Hey there… sent you a message.

@metalsadman Thanks! I’ll check them out.

@beets Hmm… that’s very interesting, and potentially very helpful. Thanks for that input. Would you happen to have an example of how that works somewhere in a github repo or something? It would be great to be able to see an example visually.

@metalsadman Thanks for the response. Yes, this is basically my conclusion as well. And you’re right, 100+ components is a lot, hence the reason for the question… but in the end, you’re probably also correct - I should probably just globally register the layout/form components that are used 80% of the time or more, and just deal with the annoyance of having to do multiple imports on most pages. I guess I got spoiled (and a bit lazy) by having the ability to globally register.

@qyloxe Soo… your answer is basically to say that you don’t know the answer, and that I should just go figure it out myself - which I have been attempting to do using developer tools - and that I shouldn’t bother asking if any of the many knowledgeable developers here have had any experience on the subject. Nice.

I have about 100+ custom UI components for my website. Instead of having to import many of them on each different page on the site, I’ve basically imported them all via the [boot] section in quasar.config.js. Notice the ‘components’ section in quasar.config.js in the image below:

This references a components.js file which registers 100+ components as in this example (abbreviated):

I’ve been wondering, is this a good way to do this? Is there an impact on the initial application load?

Again, all of this is an exercise in not having to include all sorts of import statements into each SPA page that uses different components.

Is there a better way?

Seriously… I needed specific custom functionality all over my site and q-btn-dropdown simply doesn’t cut it. But… a q-menu inside a q-btn is epic. I can do easy offsets, capture open/close events, use custom styling and content.

q-btn with q-menu is a dream to use. So, thank you!!

@dobbel So what I did was the following and it works perfectly so far:

In app.sass

.lm-input-hilight.q-field--focused.q-field--outlined .q-field__control::after
	box-shadow: 0 0 5px rgba(81, 203, 238, 1)
	border: 1px solid rgba(81, 203, 238, 1)

I then simply applied my lm-input-hilight class as follows:

<q-input outlined dense class="lm-input-hilight" v-model="lmGlobalSearch" bg-color="white" placeholder="Search...">
	<template v-slot:prepend>
		<q-icon class="text-grey-5" name="search" />
	</template>
</q-input>

Thanks for your input, it led me to where I needed to be!

@dobbel Hey wow… that’s a good start. I’m going to try to work with that.

@dobbel Yes, that’s the type of glow I’m looking for. I’ve tried standout… I don’t see how to manipulate that to get the blue glow. Any other ideas?