Never mind, I figured it out. I added style="flex: 1 1 auto; on the QSplitter and it did fill all the available space.

I really like the fact that validations are now handled directly by the Quasar framework and not by an external package. They are also straightforward to define, including the error messages when the validation fails. But (as far as I can tell) using the same validation rules in more than one form requires repeating the code. Here is an example of what I expected I can do:

1. Have a validations.js file with the list of rules to be used throughout my project

const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;

export const email = val => emailPattern.test(val) || 'Please enter a valid email address';
export const required = val => !!val || 'Field is required';

2. Use the rules in validations.js wherever validation is required. For example a login form would look something like:

<template>
  <div style="width: 500px; max-width: 90vw;">
    <q-input
      v-model="form.userName"
      label="User"
      :rules="[required, email]" />
    <q-input
      v-model="form.password"
      type="password" label="Password"
      @keyup.enter="loginClick"
      :rules="[required]" />
    <div class="row" style="display: flex;align-items: center;">
      <div class="col-4">
        <small>
          Not registered?
          <span @click="openUserRegistration()">Register now</span>
        </small>
      </div>
      <div class="col-6"></div>
      <div class="col-2">
        <q-btn rounded color="primary" label="Login" @click="loginClick" />
      </div>
    </div>
  </div>
</template>

<script>
import { required, email } from '../validations';

export default {
......................
}
</script>

When I try running this code, eslint gives me a no-unused-vars on the import line as if the required and email are not used anywhere, but they are clearly used in the :rules attributes on the q-input tags. If I disable the eslint error for that line, the code runs, but no validation occurs. For example I can have an invalid e-mail address in the User field, and no error will be shown. Or I can have empty user and password and no error will be shown.

The only way I could make the validations work is to either define the functions directly in the :rules attribute, which is really ugly and impractical, or I can define methods in the component like:

  methods: {
    // validations
    required(val) {
      return required(val);
    },
    email(val) {
      return email(val);
    },
    // end validations
.......................
  },

and change the :rules attribute in the template to be:

      :rules="[this.required, this.email]"

While I like this second approach better than defining the functions directly in the attribute, it still defies the principle of re-usability.

My questions are: why is my first approach not working and how can I have reusable validation rules?

I was just grappling with the same problem. The issue I am facing is that on the same page I have a QScrollArea and a QTable and, obviously, they have very different scrollbars. I did get close, by using ::webkit-scrollbar. There are a couple of issues with my solution:

1. The QScrollArea uses transparent scroll thumb. However, the opacity property does not seem to work for ::webkit-scrollbar or for ::webkit-scrollbar-thumb.
2. The QScrollArea uses a transition when showing/hiding the scrollbar. Again, the transition property does not seem to work for ::webkit-scrollbar or for ::webkit-scrollbar-thumb.
3. The scrollbar for the table occupies a piece of the table header on the right side. This is a consequence of the opacity not working.
4. Most importantly, the ::webkit-xxx works for WebKit browsers, but not for Gecko or IE. I know IE is sort of dying out, but Firefox has a loyal following, and the Tor browser is also based on Gecko. In my case, I am building an Electron app, which uses Chromium, which is based on WebKit. Browser support is not one of my problems, but it may be yours.

You can check an example of side-by-side table and scroll area and their scrollbars here

To Quasar team members: While my solution works (sort of) for QTable, I would have to replicate the styling for wherever else a scrollbar appears. It would be really nice if you would have a consistent way of handling scroll bar styling.

@s-molinari Hi Scott. I apologize I keep having delayed responses.

I tried QTree and had different issues. I moved to QList on your advice :-). See this

I have a list in an app set in dark mode that contains clickable items. In this mode, the background of the app is #121212 and the background of the item the mouse hovers over is #333. That is it is #333 as long as the text color is white.

The hover background color is linked to the text color of the list item. The only place in Quasar SCSS code that I found any reference that may be where the background color when hover is set is in css/core/visibility.sass where there is this section:

  .q-focusable:focus, .q-manual-focusable--focused, .q-hoverable:hover
    > .q-focus-helper
      background: currentColor
      opacity: .15
      &:before
        opacity: .1
      &:after
        opacity: .4

Since the QItem <div> gets the q-hoverable class when set as clickable, it makes sense that this would be where the background color is set.

The problem is that while this works great in light mode, in dark mode the results are less than visual pleasing. See the result when I tried to force the text color to orange on hover in this CodePen. You will notice that I have also tried to force the background color to #333, but that has no effect for some reason. I have not figured out how to override the default behavior for background color. What I would essentially like is to set the background color to a fixed color, rather than a function of currentColor. Does anybody have any suggestion how I could make that happen?

Hi @metalsadman . I did take a look at the link you provided. Pug is not my forte, but after converting it to HTML, it seems that the layout has a drawer where a list is embedded in scroll area with a search box at the top. The way the scroll area’s height is controlled is by using a style="height: calc(100% - 50px);" attribute. This would essentially set the height of the scroll area to the maximum available less 50 px, which would be used by the search box. I tried the same exact style attribute and it did not work as expected. In fact there is no change from what I reported earlier. You can see the result in the same CodePen

@s-molinari

Scott, sorry for the delayed response. Here is the workaround that I came up with in CodePen.

The idea is to have the ability to select all items in the list individually, including the expansion ones. There are some issues with my workaround:

• It is limited to the kind of data I built it for. If your hierarchical stuff is different, you’d have to change the component I created.
• The styling of the expansion item header is done in JS code, while the styling of the QItems is done in CSS. One would have to keep these in sync.
• The QExpansionItem does not emit a click event so I am using the before-show and before-hide events, which is at best kludgy.
• Ideally the selection would be achieved by clicking on the header and the expansion/collapse by clicking on the expando icon. One can have it expand/collapse only by clicking on the expando icon, but then there would be no way for the user to “select” it.

I have a CodePen where I reproduced my problem. What I want to achieve is a SPA look, where only the QList scrolls, rather than the entire page. The height of the list should be determined by how tall the viewport is minus the height of the content above it.

My attempt at a solution has been to place a QScrollArea around the QList and use the flex CSS property. The content of the panel on the left becomes:

              <div class="home-page-column-title">
                Some stuff on the left
              </div>
              <q-input
                standout
                rounded
                dense
                v-model="search"
                placeholder="Search stuff">
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
              <q-scroll-area style="flex: 1 1 auto;">
                <q-list>
                  <q-item
                    v-for="(item, index) in items"
                    :key="index" >
                    <q-item-section>
                      <q-item-label>{{item}}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-scroll-area>

The end result surprised me, to say the least. Instead of the list showing in a scrollable area, the div and q-input above are now scrollable, and the list has disappeared altogether.

If I set a fixed size to the scroll are (say height: 300px;) then the scroll area shows correctly, but resizing the window will not change the height of the scroll area.

Is there a way to have the scroll area occupy whatever space available? (That is without capturing the window’s resize events. ) What am I doing wrong in my CodePen?

Just like the header says, the QExpansionItem has an ‘active-class’ property but no ‘active’ property. I wonder how one makes use of the ‘active-class’?

In my use case, I have a list containing a mixture of QItem and QExpansionItem. The user must have the ability to select any entry in the list, regardless of whether it is a QItem or a QExpansionItem. I am using the active and active-class properties to change the look of the selected QItem. I was hoping to do the same for QExpansionItem, but I only have the active-class property.

@metalsadman: Thank you. I will give it a try.

I’d like to use the q-input, if possible for taking input such as point 3d or vector. This would be represented as a 3 float array or as a 6 or 7 float array. For a point 3d, the mask may look something like:

[#.#, #.#, #.#]

For each coordinate, I would like to be able to accept any number of digits before and after the period. I would also like to have the [], characters fixed in the mask. In other words, I would like the input to have them prepopulated, with the cursor between the [ and the first , when first entering the control. I would also like the cursor to jump to the next float number when the user hits the , key.

Following the credit card input example in the docs, I got the input to display and skip the [], characters, but I cannot make it accept any number of digits for a single # character in the mask. Is there any other way to accomplish this?

Never mind, I figured it out. I added style="flex: 1 1 auto; on the QSplitter and it did fill all the available space.