What is the best way to stop Quasar dropdown list from moving along with the page scroll?

Question

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is:

<q-select filled v-model="model" :options="options" label="Filled" />

When the drop-down menu is open and I scroll the page, the list within the dropdown also scrolls along with the page. Is there a way to prevent the popup list from scrolling with the page? I want the list to stay bound to the dropdown and not scroll along with the form.

View image here

In the image above, you can see that when we scroll the form, the dropdown items move along with the page!

javascript css vue.js quasar-framework

Answer 1

Answer №1

Utilize the intersection observer to achieve this functionality and dismiss the pop-up immediately upon scrolling past the drop-down menu.

Answer 2

Utilize the intersection observer to achieve this functionality and dismiss the pop-up immediately upon scrolling past the drop-down menu.

Answer 3

Answer №2

It seems that the suggestion made by saeed is to address the scrolling issue by closing the popup:

<template>
    <q-select ref="selectRef" v-intersection="hidePopup" />
</template>

<script setup lang="ts">
    const selectRef = ref<QSelect | null>(null);

    function hidePopup() {
        selectRef.value?.hidePopup();
    }
</script>

However, this approach does not completely resolve the issue at hand.

Answer 4

It seems that the suggestion made by saeed is to address the scrolling issue by closing the popup:

<template>
    <q-select ref="selectRef" v-intersection="hidePopup" />
</template>

<script setup lang="ts">
    const selectRef = ref<QSelect | null>(null);

    function hidePopup() {
        selectRef.value?.hidePopup();
    }
</script>

However, this approach does not completely resolve the issue at hand.

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

Answer №1

Answer №2

Similar questions

Why is the Javascript code outputting undefined and NaN during execution?

Place 2 unique keys into the specific cells of a bootstrap table template

NodeJS error: Attempted to set headers after they have already been sent to the client

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

Is there a way to tally the frequency of a specific property appearing in one array within another, and then transfer those matches into a separate array?

Update the button text dynamically when clicked without using an identifier or a class

Set the value of an input without using v-model or any form of data binding

How can I toggle the visibility of a div based on whether a variable is defined or not?

execute a retrieval query on an html pop-up

The condition is not established by the Firestore where clause

Error in Vue.js and Socket.io - the server response cannot contain the wildcard '*' when the request has its credentials mode set to 'include'

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

The resizing function on the droppable element is malfunctioning on Mozilla browsers

"Responding to an Ajax request with a .NET Core server by sending an xlsx

How to retrieve the dimensions of an image for a specified CSS class with Selenium or PIL in Python

Using PHP to iterate through an array and output the values within a

Create a file with jQuery and send it to PHP

Creating Projects Without a Build System in Sublime Text 3

relocate HTML components

Having trouble with CSS styling not applying to the header tag