I’m facing the same problem. Did you get it working? Otherwise we’ll need to create an issue about this.

@metalsadman Great stuff, thank you for your help!

I’m using the q-select component with the use-input prop to allow for typing. When the user clicks the component the dropdown-menu with options is automatically opened.

I’d like for the component to keep the options-menu closed until the user starts typing or clicks specifically on the dropdown-icon. Is this possible to accomplish or do I need to write my own component for that?

Thanks in advance for the help!

Thanks for your work Razvan and I hope things turn for the better!

I’ve got a qmenu with a qlist inside it. The qlist size (height) will change while the menu remains open (I don’t know the size of the list when the menu opens). This works fine except if the qmenu is opened near the bottom of the page. Then the qmenu will create scrollbars, instead of switching position from below the item to above the item. Is there a remedy for this?

Here is a Codepen example: https://codepen.io/Gnopps/pen/jONrYjr?editors=1010

This is what I get:

Whereas this is the result I’m after:

Yes, this works. Thanks a lot!

I’m using a q-table with scoped slots to format certain columns:

<q-table
        :data="data"
        :columns="columns"
        row-key="id"
      >
        <template v-slot:body-cell-rating="props">
          <q-td>
            <q-rating
              v-model="props.row.rating"
              icon="star"
              readonly
            />
          </q-td>
        </template>
</q-table>

The table has many columns. Now I’d like to detect when the user clicks a row. I can do that like this:

<template v-slot:body="props">
        <q-tr :props="props" @click.native="requestRowClick(props.row.id)">
        </q-tr>
</template>

However, the problem with doing this is that this overrides the whole body, meaning I will have to specify a q-td manually for each column.

Is it possible to combine these two somehow so that I can use the body-cell-[name] slot and at the same time detect row clicks?

I’m trying to make the border between C/D and B draggable and am experiementing with qsplitter instead of qdrawer. It seems to be working except for this toolbar issue. However I managed to “solve” it in a hacky way, where the width of the qsticky is computed to be the same as the qsplitter-value. There ought to be a more elegant solution though:

<q-splitter v-model="splitterModel" :limits="[50, 100]">
   <template v-slot:before>
     <pageComponent/>
     <q-page-sticky expand position="top" :style="toolBarWidth">
       <q-toolbar class="bg-accent text-white">
         <q-toolbar-title>Page Title</q-toolbar-title>
       </q-toolbar>
     </q-page-sticky>
   </template>
   <template v-slot:after>
     <sidebarComponent />
   </template>
 </q-splitter>
</div>
</template>


<script>
export default {
computed: {
 toolBarWidth() {
   return "width:" + this.splitterModel + "%";
 }
},
data() {
 return {
   splitterModel: 75
 };
}

Thanks for your idea! I tried it before but didn’t add padding. Now when I added padding for the content, it worked.

However, expanded page-sticky doesn’t work with qsplitter, it expands over the split area. (i.e. into both ther before and after slots of qplitter). Any ideas on how that could be solved?

I’ve got a qpage inside a qlayout. On this qpage I’d like to have a sticky menu that covers the width of the qpage. I can do this with a qtoolbar, but I haven’t figured out how to make it sticky. If I use qpagesticky then it just becomes overlaid over the content and what I’m looking for is reducing the qpage size.

So question is, how do I create the green element C in the example below?

I’ve been searching here about making qtoolbar sticky or nesting layouts, but haven’t been able to figure out how to accomplish this yet. Any ideas here?

I’ve got a list of about 1000 inputs (and other components) that I want to display. I want to display them all at the same time to make it quick for the user to move between them with the keyboard.

If I’m using qinput the performance takes a hit (about 6 times slower, which is very noticeable) so instead I’d like to use just the native input-box and style it using Quasar’s material CSS-classes. Is this possible somehow?

Here is an example of what I mean with the performance: https://codepen.io/Gnopps/pen/ZgJLqZ?editors=1010

Has anyone managed to implement drag and drop in q-table, for example with Draggable/Sortable? There is the upcoming Quasar-extension but I need more functionality than that one offers.