I know this is old now, and Quasar has moved on quite a bit too, but @eduardodgarciac on the Discord channel pointed me in the right direction. Actually, trying to use QScrollArea inside a QDialog, and fill the space in the dialog with variable sized content, scrolling if necessary. The key is to use flex column, and set the QScrollArea to class="col". Final result can be seen here: https://codepen.io/dsl101/pen/jOOJNXK

Hope it helps someone!

Thanks - I tried a few things, and forked the existing template. Then I found the correct format for the init command:

quasar init @myrepo/quasar-template-default test

The @ is crucial - otherwise it tries to load a sub-version of the official template.

For info - I had to pin vue-template-compiler to 2.3.4 as well - without that, I got a version mismatch when running quasar dev.

Many thanks - I’ve posted a feature request: https://github.com/quasarframework/quasar/issues/557

Not exactly the same content as you, but I got extra stuff on cards to ‘float to the bottom’ using style="flex-grow: 1":

    <q-card-title style="flex-grow: 1" @click="handleSelect">
      {{item.text}}
      <span v-if="!pageSettings.anonymous" slot="subtitle">{{subText}}</span>
      <q-icon v-if="isMine(item) || isAdmin()" slot="right" name="more_vert" >
     .
     .     
     .
      </q-icon>

    </q-card-title>

    <comment
      :id="id"
      :active="activities.includes('comment')"
      :pageSettings="pageSettings"
      :activitySettings="activitySettings.comment"
    />

The output of the comment component is now anchored at the bottom of the card, however tall the card is.

I’m really struggling to get q-scroll-area to work reliably, and I’m sure I’m Doing It Wrong. The pattern I’ve been using is something like this:

<template>
  <q-scroll-area class="fill-window">
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

<style scoped lang="stylus">
  .fill-window
    height calc(100vh - 160px)
</style>

This works, but (a) I’m hand tuning that offset (160px) to cater for the vertical position this component is rendered within the main layout, and (b) when I add something ‘optional’ to the component like this:

<template>
  <q-scroll-area class="fill-window">
    <div v-if="showControls">
      <!-- Controls here -->
    </div>
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

The value of 160px now depends on whether the parent passed true or false to showControls.

So, is there a better way to say “give as much height as possible without triggering the browsers own scrollbar”?

OK - here’s my solution. I’m still not 100% sure why this works and making setOption() return a function doesn’t, but hey ho. I’m sure it’s tied up inside template compilation:

@input="val => { setOption(setting.key, val) }"

I was wanting to use @before-show to set the ‘initial’ value. Then when clicking ‘Set’, the new (cleared) value would be null and cause an @save event. But it seems the initial value is stored before @before-show is triggered?

In any case, setting the model via the Qbtn surrounding the popup works OK.

I edited the code above to be clearer, and also updated the code pen with 2 versions (one that works and one that doesn’t). The only difference is where editLabel is set initially. In the QBtn @click works, in the QPopupEdit @before-show doesn’t.

Note this is the original code which doesn’t work:

<q-btn flat round dense icon="edit">
  <q-popup-edit v-model="editLabel" buttons @before-show="editLabel = label" @save="saveLabel">
    <q-input v-model="editLabel" clearable></q-input>
  </q-popup-edit>
</q-btn>

whereas this version does work:

<q-btn flat round dense icon="edit" @click="editLabel = label">
  <q-popup-edit v-model="editLabel" buttons @save="saveLabel">
    <q-input v-model="editLabel" clearable></q-input>
  </q-popup-edit>
</q-btn>

The significant difference is where editLabel is initialised. In the @before-show event the model is set, but apparently it is not set before the QPopupEdit initialValue has been copied from the model. This causes __hasChanged () to later return false when the model is cleared back to null.

I’m struggling to get QPopupEdit to emit a @save when the QInput is clearable. Here’s an example: https://codepen.io/dsl101/pen/XWNRZYz?editors=1011

1. Click on one of the edit icons
2. The current value of editLabel changes and the popup opens
3. Click the ‘clear’ icon at the right of the QInput
4. Click the ‘Set’ button on the popup.

I would expect to see null printed in the console, but I don’t see anything. What am I doing wrong? Note you can get null into the console by changing the QInput value first (and clicking ‘Set’).

Yes, I’m using dynamic components in some places, but I’ve found they do need quite a bit of boilerplate to avoid premature loading, and then they need careful handling to get them to open with the data (e.g. I’m using them for seldom-used dialogs). I end up with lots of code like this:

    <component :is="editor"
      ref="edit"
      title="Edit Item"
      :item-text="item.text"
      @edit="handleEdit"
    />

    components: {
      EditFeedback: () => import('components/editors/EditorDialog')
    },
    methods: {
      handleOpenEditor (what) {
        this.item.text= what.text
        if (this.editor === null) {
          this.editor = 'EditFeedback'
        }
        setTimeout(() => { this.$nextTick(this.$refs.edit.show) }, 0)
      }
    }

Without using both setTimeout() and $nextTick(), I find that either this.$refs.edit is undefined, or the props haven’t rippled down into the component.

I’ve decided to refactor things into a parent component which only contains the multiple child components that used to contain menus, and instead have all the children emit an event which allows the parent to open an (already templated) menu based on the id of the child passed up in the event. I think this solves the problem without too much extra code like above.

I have a fairly complex component, with several menus that might be available to privileged users, and those menus may have many options. Currently all is working with <q-menu> components, but of course that means every menu is part of the template, whether or not it is visible. Many of the items on the menu are reactive to the components current state, and we’re seeing that once there are many tens or hundreds of components (each with several menus), performance starts to degrade—I assume because those menus are being reactively updated from item data.

Each component could share a single menu (one menu open at a time is fine), but then that menu would have to live in the parent, and so becomes decoupled from the component it’s tightly integrated with.

Is there some kind of analogy to the Dialog plugin where a menu could be created dynamically in code, only when the user clicks an <q-btn>?

I know this is old now, and Quasar has moved on quite a bit too, but @eduardodgarciac on the Discord channel pointed me in the right direction. Actually, trying to use QScrollArea inside a QDialog, and fill the space in the dialog with variable sized content, scrolling if necessary. The key is to use flex column, and set the QScrollArea to class="col". Final result can be seen here: https://codepen.io/dsl101/pen/jOOJNXK

Hope it helps someone!

I made a codesandbox to illustrate the problem: https://codesandbox.io/embed/codesandbox-app-5g21z

I would like the content in MyView to expand to fill the available space. That includes accounting for the variable sized controls on the parent view, which at the moment is done with a q-page-sticky (click the button to change its size), but I realise that will probably have to change. The 2 tabs show how not using any q-scroll-area means the entire page scrolls, and using a q-scroll-area with specific height ends up with cumbersome computed style="..." attributes.

I suspect the main page will have to become a flex-column, but that’s a lot of refactoring in my app, and I wanted to be sure that was the right way to go and that I wasn’t missing something easy inside MyView.

I’m really struggling to get q-scroll-area to work reliably, and I’m sure I’m Doing It Wrong. The pattern I’ve been using is something like this:

<template>
  <q-scroll-area class="fill-window">
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

<style scoped lang="stylus">
  .fill-window
    height calc(100vh - 160px)
</style>

This works, but (a) I’m hand tuning that offset (160px) to cater for the vertical position this component is rendered within the main layout, and (b) when I add something ‘optional’ to the component like this:

<template>
  <q-scroll-area class="fill-window">
    <div v-if="showControls">
      <!-- Controls here -->
    </div>
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

The value of 160px now depends on whether the parent passed true or false to showControls.

So, is there a better way to say “give as much height as possible without triggering the browsers own scrollbar”?

Dammit. Been pondering this for ages, and now having written the post, I realise I hadn’t properly initialised the properties of toolbarMenu. The fact they were working in QPage put me off the scent. Apologies for the noise.

I have a fairly complex application, with a few levels of components, and I haven’t been able to replicate this in CodePen, so presume it’s something I’m doing. The component tree is like this:

and the Vuex state contains a setting for whether certain items in toolbar menu should be visible. It’s an object like this:

To show the issue, I’ve included the Store Getter toolbarMenu, and put these 2 lines into the relevant templates. In Default.vue (which provides the QToolbar), and Page.vue (which provides the QTabs at the bottom of the component tree), I have:

    <pre>{{toolbarMenu.select}}</pre>

To begin with, all is good:

The problem is when this state is updated via an action within QPage triggered from the QTabs @input event. I can see via devtools that the Vuex state is indeed changed (all those trues become false), and the value in QPage updates, but the value in QToolbar does not:

If I make a simple source code change when running via quasar dev, the HMR update brings the QToolbar value in line. Similarly, if I pull all this code into a single file in CodePen, it works exactly as it should. So I’m a bit stumped—what might I have done that makes this getter non-reactive in the toolbar?