The ‘bar-style’ property for QScrollArea works awesome in vertical mode, but in ‘horizontal’ mode the bar style only displays itself as a styled round spot at the end of the scroll bar, as though it were applied to the vertical bar which only exists at that intersection. Can that be fixed?
Thanks!

I am trying to expand the ‘drag-only-range’ functionality on Q-Range. I want to keep a static distance between max and min only when the range exceeds that distance. And when one of the values is changed so that the range is less than the distance the drag-only-range mode is off. I wrote a simple function for that. The model values change as required, but the second label won’t move on the slider when I move the first one and that causes issues. However, when instead of dragging the slider label I change max/min values with the help of test Increment/Decrement buttons that use the same function to correct the distance between ranges, it works as intended! My codepen for this:
https://codepen.io/Solarwake/pen/QWjwVeE

Why so and how to fix that? A reactivity issue or something else with the way Vue watches value changes? I’ve been trying to change q-range model values with this.$set but the result is the same.

How to place one of labels below the scale on a q-range? When labels are longer than just a digit or a number and min and max values are close, one label completely covers another. Placing one label above and the other below the slider scale could resolve this.

I imported i18n in vuex modules where I need it this way:

import { i18n } from 'src/boot/i18n'

and then accessed i18n translations in my vuex actions this way:

let myMessage = i18n.t('messages.myMessage')

Works like magic.

I want to disable a portion of markers on a q-slider but still keep them displayed rather than just chopping them off with max/min properties. For instance, having 24 hours on the scale but only 8:00 - 16:00 enabled for sliding. I wonder if that’s possible and if not that could be a useful feature. Also, i don’t see a way to add labels to markers, just the slider itself.

Thank you!

@metalsadman,

https://codepen.io/Solarwake/pen/NWGPLQx

Type in an input field and hit SAVE_CHANGES at the bottom. A green Success banner appears if a click occurs. On mobile, Androids.

I have multiple forms with QInputs and QBtn elements which either submit a form or do something else. I can emit the @click event with QBtn only on the second tap. The first tap sets the focus on a QInput, a QSelect or does nothing at all.

I’ve been unable to sort it out so far and my only guess that something goes amiss with element positioning and coordinates when the keyboard panel at the bottom of the screen appears/disappears. So by tapping the button I actually tap on another element. I couldn’t track the precise pattern but the issue seems to persist if after page load and before I tap on QBtn I touch at least one input field thus making the the keyboard panel appear.

Tested on Android devices by accessing my site hosted on my laptop’s localhost.

Any ideas much appreciated, thank you!

I recently discovered absolutely the same issue with QSelect with autocomplete, tested on multiple Android devices and even created a topic because to me it looked quite annoying and not nice at all:

https://forum.quasar-framework.org/topic/5568/qstepper-qselect-with-autocomlete-input-box-jumps-to-screen-top-on-mobile

But later I thought that it’s a ‘feature’ because even Quasar docs page with basic samples displays the same behavior on mobile. And on the other hand, it’s quite reasonable to have the input box and the dropdown menu at the top because the lower part or the screen would be covered by keyboard pad. But now that I found this topic I’m not sure:(…So is that not a correct behavior?

Looks like a feature and the topic can be deleted…

I use QSelect with autocomlete inside QStep of QStepper. QStepper is used inside one of QPages.
When I click on the input box and it gets focused the box jumps to the top of the window and rest of the screen gets dark transparent overlay on mobile devices and emulators.

The screenshots are the basic samples from Quasar docs put together.

I tested and faced the issue in Genymotion on Android 8.0 on different devices and on real mobile devices.
Codepen below with just QStepper + QSelect has the same issue:

https://codepen.io/Solarwake/pen/vYOwmgd

A bug?

Hello,

The common way to add Quasar components to be available globally in the project is:

return {
  framework: {
    components: [
      'QTooltip'
    ]
  }
}

However, some Quasar components maybe used on just one of my project pages in just one child component among multiple others. I import such rarely used Quasar components locally into that child component with:

import { QTooltip } from 'quasar'

and

components: {
      QTooltip
    }

which adds just a little bit more code. Is this approach correct and does it improve performance and memory consumption?
Thank you!

I’m trying to add a ‘loading’ slot to a QImg where the the image src is base64 loaded thru API. It works great and looks so nice when the src is specified as url, but it won’t show in in my case at all. Is that possible to use ‘loading’ slot in my case? I know I could use QInnerLoading which is easy to show/hide using ‘showing’ property, like this: :showing=“imgNotYetLoaded”, but I’d prefer the first option.

Oh, thank you! Slots are so powerful!

I use QSelect with autocomplete function and chips input. I didn’t find any options to change chips color from grey…Is that possbile?

What I actually did now is placed my QInputs inside <q-item-section><q-item-label><q-radio>…</q-radio></q-item-label></q-item-section> rather than creating a sibling <q-item-section><q-item-label>…with the form fields inside.This way QList with tag=“label” does’t seem to cause any trouble. If that does not contradict any of Quasar’s principles for now I’d go on with that option.

https://codepen.io/Solarwake/pen/VwZywgb
I used the same model for all inputs in this sample. It worked the same with different models on each input or with just one input displayed only with the active QRadio-QItem coupling. The same behavior with QSelect used with autocomplete input.

Also, I found that inputs placed inside q-radio do not show that queer behavior. However, I’ve been using the template I posted in codepen because it seemed more convenient as I was rendering a small form with a few inputs inside the selected QItem.

Good day.
I use tag=“label” property on QList (to encapsulate QRadio in list items, if this information is essential). I placed a few QInput components inside QItems in the list. However, I cannot focus on QInput fields when I have tag=“label” property. It occurs this way:
when I just click on the input field the @input even occurs immediately, the label (float-label) jumps up for a moment and then returns to its initial position and the input field loses focus. And I cannot type anything in the input field (I can only do it if I click on the field and keep my mouse key pressed down).

I’ve been using the same construction in the previous Quasar version and it worked just great.
I’m not sure whether it’s a bug or my lack of understanding how click event propagation works.

Thank you.

Oh, my bad(( That’s written on pink…Thank you! I could do without q-field actually but I found that in the new version Quasar generates a custom id on every q-input element, like ‘id="qf_3061d64c-aa2d-4392-7fcf-6e019645a100’. With the previous Quasar version I used to add my own Id property either to QField or QInput which was very convenient to run quick tests. Adding my own id to QInput won’t overwrite the one genetated by Quasar (but it for works for QField). So I assume it’s not a good idea to attempt to do so at all as Quasar needs its own generated ID for better control over components…

I’m trying q-field and q-input combination on v1.1.0:

      <q-field
      :value="username"
      class="col-12"
      label="lemail"
      id="emailField"
      filled >
        <template v-slot:control>
          <q-input  
          class="col-12"
          v-model="username" 
          clearable
          color="orange"
        />
      </template>
      </q-field>
      
      <q-field
       :value="username"
       label="password"
       id="passField"
       filled
       class="col-12">
        <template v-slot:control>
          <q-input
          class="col-12"
            v-model="password" 
            color="indigo"
            type="password"
            clearable
          />
        </template>
      </q-field>

And I have at least 2 issues so far. 1. double-inderline 2. double fill-box (from ‘filled’ property). Moving the ‘filled’ property from q-field to q-input component removes the second box, but the float-label floats up outside the fill-box boundary then. Removing the <template v-slot:control> wrapper fixes the double-undeline issue but I figure this is not the right way at all. Did anyine have similar issues?

I found a similar topic dealing with double-inderline after update but I’m using a brand new project.