open a menu/list outside of the drawer

amoss

Hi

I have a qDrawer to the left with a qInput for the user to search with.
I’m using a qList component for the results and it is shown below the search input pushing down everything below.
How is it possible (css? something else?) to make it appear floating outside the drawer as a continuation to the search field itself?

If not outside, it could be below but “floating”, for example, something like this

Thanks

metalsadman

@amoss wrap your qlist in a qmenu.

amoss

I think I’m misunderstand something. The working code is like the following:

<q-input>
</q-input>
<q-list v-if="results.length > 0">
</q-list>

I wrap q-list with q-menu but nothing showed up (I moved the v-if to the menu section).
I then moved everything inside q-input

<q-input>
   <q-menu v-if...>
      <q-list>
      </q-list>
   </q-menu>
</q-input>

Again nothing showed up. I removed the q-menu section

<q-input>
      <q-list v-if...>
      </q-list>
</q-input>

And then the list appeared as hovering the q-input, almost transparent and not intuitive.

metalsadman

@amoss please take time to read the docs and it’s exampes, it’s easy to pull those in a codepen and copy paste other example to test their combination. ie. qinput and qmenu. https://codepen.io/metalsadman/pen/rNxKRZj.

amoss

I understand the confusion.

It worked on my side as well but I needed to click the q-input for the menu to show itself.
I wanted to show it once results.length > 0 so I used the v-if (that worked for the q-list) instead of v-model.
I now used the v-model and it works great.
Thanks!

metalsadman

@amoss again that’s covered in the docs, many ways to show this either giving it a boolean model or a ref to show it depending on a condition. edit. look like you got it sorted out, gratz :).

amoss

It is in the docs, my mistake was copying the “working” method for q-list into the q-menu… didn’t notice the different. Thanks a lot!

amoss

*difference

amoss

There’s one small problem.
When clicking the q-input for the first time, the focus is immediately lost. Only when clicking it the second time, the focus remains.
The menu is visible only after the user enters several characters so the need to double click to gain focus is a bit misleading…
Please advice
Thanks

amoss

That worked like a charm: https://forum.quasar-framework.org/topic/3782/autocomplete-keep-focus-on-input-with-custom-menu/4

No More Posting New Topics!

open a menu/list outside of the drawer