Troubleshoot Vuetify autocomplete style problem within a container with scrolling functionality

My project features a sidebar and a container. While the sidebar spans the height of the screen, the content in the container is longer. To enable scrolling within the container, I applied overflow-x: hidden to its CSS.

The challenge arises when attempting to integrate a Vuetify autocomplete component into the container. Due to the overflow-x styling, the dropdown menu of the autocomplete component scrolls along with the page instead of remaining connected to the input field.

To illustrate this issue, I have created a simplified version of the code from the Vuetify documentation on Codepen: https://codepen.io/brm49024/pen/PoqaBzM.

Ultimately, my aim is for the dropdown menu to stay fixed with the input field while scrolling. Is there a solution that can achieve this behavior?

javascriptcssvue.jsvuetify.js

Answer №1

To dynamically adjust the menu height as the page scrolls, one approach is to implement a method called fixPosition.

Start by including the following method:

 fixPosition () {
      const menu = document.getElementById("app").nextElementSibling
      if (!menu) return
      const input = this.$refs['scroll-track-input'].$el.getBoundingClientRect()
      menu.style.top = input.bottom - 50 + 'px'
    }

In your template, assign the scroll handler to the fixPosition method and add a ref called scroll-track-input to the autocomplete element.

<main id="container" v-scroll:#container="fixPosition">
      <v-autocomplete 
        ref="scroll-track-input"
      />
</main>

See a live demonstration here: https://codepen.io/ellisdod/pen/JjdBWPw

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

fetch a particular value using jQuery and display it

Seeking assistance here! I am in the process of consuming a Web Api service from an MVC ASP.NET App using jQuery's function $.ajax. The goal is to retrieve a specific record from the database. While I can successfully connect to the service and fetch ...

javascriptjqueryajaxasp.net-web-api

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

Can someone explain to me why my absolutely positioned element is displaying after my child_static div? I'm under the impression that absolutely positioned elements are removed from the normal flow. So why isn't child_absolute covering the child_ ...

htmlcsscss-positionabsolute

ensuring the order of ajax calls with jquery-ajax

Despite my question being flagged as a duplicate, I'm hesitant to use async:false for the given answer. How do I ensure an orderly sequence of async ajax calls? My concern is not about replacing content; rather, I aim to sequentially append svg eleme ...

javascriptjqueryajaxsvg

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss

Acquire the nested object within a MongoDB document using its assigned ID

Looking to retrieve and edit a specific comment within a post, but not sure where to start. Here is an example of my Post data structure: { "title" : "First Node.js App", "body" : "testing 123", "st ...

javascriptnode.jsmongodbmongoose

What is the best way to show leaflet markers using data from a database table?

I am trying to dynamically display leaflet markers based on the number of images related to a project. Currently, I am fetching the image coordinates from a MYSQL database, storing them in PHP variables, and passing those values to JavaScript variables. // ...

javascriptphpmysqlleaflet

Django RGBField cannot locate jQuery

Working on a project that utilizes an RGBField, the following script is injected into the template (nested deep within django's structure, as its exact location remains elusive): <script type="text/javascript"> (function($){ ...

javascriptjquerypythondjangocypress

Conditional statements in jQuery for identifying a specific div based on its id

My current setup involves an HTML table that gets populated based on a mysql query. The table is enclosed within: <div id="punchclock" class="timecard"> I also have a jQuery script in place to calculate the totals of the times entered into this tab ...

javascriptjqueryhtmlmysql

Transform buffer information into a visual representation

How can I convert the buffer data into an image so that when I loop through the results and render it in the img src, the user will be able to see the image? I am currently using ejs for rendering. <span> <img class="user-with-avat ...

javascriptnode.jsexpressejs

When the button is clicked, an alert is triggered to display the value of the data

Here's a button example: <button data-id="1" onclick="showID()">Show ID</button> Accompanied by a function: <script> function showID() { alert(($(this).data("id"))); } </script> The goal is to display the data-id in ...

javascriptjquery

Positioning Bug in FF/IE with Absolute Placement

It appears that Chrome is the only browser displaying my code correctly. While testing in Firefox and Internet Explorer, I have noticed that my position:absolute is being affected by the border size, unlike in Chrome where it remains unaffected (which is ...

htmlcss

Tips for avoiding the push method from replacing my items within an array?

Currently, I am diving into Typescript and VueJS, where I encountered an issue with pushing elements to my array. It seems to constantly override the 'name' property. Let me share the code snippet causing this problem: const itemsSelectedOptions ...

javascripttypescriptvue.js

Configuring bitfinex-api-node with Node.js to efficiently handle data from the websocket connection

Apologies for the vague title of this question, as I am not well-versed in programming and even less so in node.js My goal is simple: I aim to utilize the bitfinex-api-node package (a node.js wrapper for the bitfinex cryptocurrency exchange) that I instal ...

javascriptnode.jsnpmwebsocket

What is the definition of the term "WebapiError"?

I'm currently developing a Spotify Web App that focuses on retrieving the top albums of KD Rusha using the Client ID and Artist ID to exclusively fetch his releases on Spotify. To accomplish this, I am utilizing an npm package called spotify-web-api-n ...

javascriptnode.jsreactjsspotify

Is it necessary for me to generate a mock or stub in order to evaluate the functionality of this asynchronous procedure?

I am looking to test a function that operates asynchronously within a specific class. Should I create a mock or stub for testing this function? If so, how would I go about creating one? delayedAlert(message: string, time: number, cb){ return ...

javascriptangularionic2jasmineangular2-testing

The functionality of a radio button triggering a form submission to different pages is experiencing issues with Firefox

This piece of code is designed to submit a form when a radio button is clicked, and depending on which radio button is selected, the form action should change. While this code works fine in Chrome and Opera, it doesn't seem to function properly in Fir ...

javascriptphp

MongoDB failing to enforce unique constraints on partial indexes

I have a set of data that looks like this: { name: "Acme co." add4: "", nationalNumber: "+13412768376" }, { name: "Acme Inc.", add4: "6345", nationalNumber: "" } My goal is to insert these records into a collection, but only if they are uni ...

javascriptmongodb

Navigating to different HTML pages using JavaScript

Currently, I am working on transitioning from my login.html to account.html using JavaScript. In the login.html file, there will be a validation process using MongoDB. If the data matches, it should redirect to account.html; however, this is not happening ...

javascripthtmlangularjsmongodb

Learn how to personalize the global navigation bar in Vue specifically for each view

Just diving into the world of Vue and I'm loving it so far. I've been working on a Vue-CLI app with a navbar and content, where the navbar is consistent across all pages. However, I want to spice things up by adding some unique content to the nav ...

vue.js

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap