QSelect Sticky Header

[edwillys]

Hello,

I’m trying to use the QSelect in a way that the first element of the popup list is always shown at the top, even when the user scrolls down. Technically speaking, I want the content defined inside my <template v-slot:before-options > to have a similar behavior of QPageSticky or a sticky header in a QTable. Setting style=“position: sticky;” doesn’t seem to do the trick.

Is there a way to achieve this?

Thanks in advance.

[dobbel]

@edwillys

first element of the popup list is always shown at the top

What about the rest of the options? Where\how are they to be displayed?

How about this example, this demo displays the dialog on top…? ( second demo)

https://quasar.dev/vue-components/select#Example--Show-options-in-dialog

[Ilia]

Just tried sticky, works fine:

https://codepen.io/cobanja/pen/bGwrJGX?editors=1010

[edwillys]

@Ilia True. I forgot to add the “top” proprety after the position. Thanks for pointing that out!

[edwillys]

@dobbel I meant “at the top” instead of “on top”, like a sticky header in a QTable. As pointed out by @Ilia , the position: sticky; top: 0px; does indeed work (I had forgotten to add the top )