No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Q-Brad
    3. Posts
    • Profile
    • Following 0
    • Followers 0
    • Topics 8
    • Posts 22
    • Best 4
    • Groups 0

    Posts made by Q-Brad

    • RE: Contract opportunity for senior full-stack developer

      @Graypes Hey there… sent you a message.

      posted in Jobs
      Q-Brad
      Q-Brad
    • RE: [Solved] What is the impact on many globally available custom components?

      @metalsadman Thanks! I’ll check them out.

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [Solved] What is the impact on many globally available custom components?

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

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [Solved] What is the impact on many globally available custom components?

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

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [Solved] What is the impact on many globally available custom components?

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

      posted in Help
      Q-Brad
      Q-Brad
    • [Solved] What is the impact on many globally available custom components?

      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:

      b000caee-7971-4708-91e4-d03bc836f37c-image.png

      This references a components.js file which registers 100+ components as in this example (abbreviated):
      5421eac7-1d32-41ab-8b6a-8fe84d924136-image.png

      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?

      posted in Help
      Q-Brad
      Q-Brad
    • Whoever worked on q-menu is a frickin' genius.

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

      posted in Framework
      Q-Brad
      Q-Brad
    • RE: [Solved] Anyone know how to get a Bootstrap type glow on focused text input fields?

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

      e5394d18-cf68-45a5-a541-162c44c0f4ed-image.png

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [Solved] Anyone know how to get a Bootstrap type glow on focused text input fields?

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

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [Solved] Anyone know how to get a Bootstrap type glow on focused text input fields?

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

      posted in Help
      Q-Brad
      Q-Brad
    • [Solved] Anyone know how to get a Bootstrap type glow on focused text input fields?

      I understand how the glow effect works in CSS, but applying it to a Quasar outlined text input field is alluding me to no end.

      Has anyone tried/achieved this?

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [Solved] How to get a text input to span the remaining width of the header toolbar?

      I feel like an idiot… lol. Thanks for the help, it worked.

      posted in Help
      Q-Brad
      Q-Brad
    • [Solved] How to get a text input to span the remaining width of the header toolbar?

      I don’t know if I’m just not seeing a way to do it but it’s driving me a little batty.

      Currently the text input doesn’t span the whole remaining part of the header as in the following image: https://imgur.com/NQQDn3s

      posted in Help
      Q-Brad
      Q-Brad
    • RE: [solved] q-tabs don't go "scrollable" in simple div without setting div's width explicitly

      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>
      
      posted in Framework
      Q-Brad
      Q-Brad
    • [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.

      posted in Framework
      Q-Brad
      Q-Brad
    • RE: [Solved] Is there a way to use a q-spinner (or SVG) as the icon for a q-route-tab?

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

      posted in Framework
      Q-Brad
      Q-Brad
    • [Solved] Is there a way to use a q-spinner (or SVG) as the icon for a q-route-tab?

      Hi all,

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

      1022bd69-2038-414f-accf-d4d23b4c8c55-image.png

      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.

      1a125d66-3828-4727-8c00-0322a4d353e8-image.png

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

      posted in Framework
      Q-Brad
      Q-Brad
    • RE: [Workaround Found] Is there a way to lock the first q-tab?

      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:
      b879652a-3a19-4894-9a36-1731e574303e-image.png
      78e22e8e-2d3b-446c-bdba-1ed956a7eda3-image.png

      posted in Framework
      Q-Brad
      Q-Brad
    • [Workaround Found] Is there a way to lock the first q-tab?

      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?

      srtabs.jpg

      posted in Framework
      Q-Brad
      Q-Brad
    • RE: [Solved] Strange Behavior - Going past last q-btn in q-toolbar activates the first q-btn.

      Thanks… done.

      posted in Framework
      Q-Brad
      Q-Brad