What is the best way to style the CSS so that the select button remains fixed in its position even when scrolling down?

Here's the script I am working with:

<v-col
    cols="12"
    md="12"
    style="position: -webkit-sticky; position: sticky; bottom: 0;background: white;"
>
    <v-btn class="success" block>Select</v-btn>
</v-col>

If you want to see a demo and the full code, check out this link: https://codepen.io/happyforever/pen/vYYoYNw?editors=1010

To test it on mobile and scroll down, you will notice that when you reach the bottom, the select button moves up.

My goal is to make sure the select button stays in place and does not move when scrolling down. Any ideas on how to solve this problem?

Answer №1

To fix the issue, add position: fixed to your CSS code.

<div
    style="position: fixed; bottom: 0;background: white;"
>

UPDATE
Make sure to set the padding of the v-container element to 0 on the bottom side to resolve the problem.

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

Having trouble with the button's functionality in Internet Explorer?

Recently, I encountered an issue with a "dropdown button" that I created using only CSS and HTML. Surprisingly, it works flawlessly in Chrome and FireFox, but seems to have some glitches when tested on Internet Explorer (IE). The "New Invoice" button fails ...

Adding animation effects using CSS and/or jQuery

Are there any Jquery plugins or CSS codes available to achieve similar effects as seen on the following pages and , without utilizing webGL?... ...

[CSS] What's the trick to getting it to smoothly glide to the top?

As a new designer, I have a question about how to make the background color extend to the top without any white space. Can someone please guide me on how to achieve this? <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; p ...

Struggling with creating a responsive navigation bar using Bootstrap

We're in the process of crafting a fresh new website, and our designer has put together a navigation bar with a unique curve that has left us scratching our heads! Here's a look at our current header setup: This is the current HTML code for our ...

What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from ...

Scrollbar Excess in Windows 10 on Chrome Version 76

<div style="overflow-x: hidden"> <div style="height: 100%"> <p style="margin-bottom: 1rem"> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan nisl id maximus gravida. </p> ...

Is there a way to determine if a watcher function executed right away in Vue 3?

When working with vue3, if I encounter a situation like this watch(loading, (new_val, old_val) => { // How can I determine whether this function was triggered immediately or after the initial run? }, {immediate:true}); Is there a way to achieve som ...

Tips for locating a value that differs from an item in a v-autocomplete box

I am using a v-autocomplete component: <v-autocomplete v-model="fromPrice" :items="listOfFromItems" dense solo label="from" hide-detail ...

Tips for replicating a float layout with CSS grid

In the layout I have designed, there is an image on the left and text content on the right. The structure resembles this: .left { max-width: calc(100% - 150px); float: left; } img { width: 300px; max-width: 100%; } <div class="wrapper"> ...

Struggling with enabling CORS on nginx, difficulties with requests

I am facing an issue with my application authentication process. Everything works fine when testing on localhost, but when switching to a server with a proxy involved, I encounter an error message requesting CORS enablement. The specific error message sta ...

Transforming divs into a dropdown to mimic the functionality of a select or combo

I have multiple divs contained within a wrapper div, each representing the same entity as shown in image 1. https://i.sstatic.net/iNjqB.jpg When I click on "Select 1" or "Select 2", I need to trigger a dropdown list that allows me to select an option and ...

Tips on positioning a div based on the screen dimensions

In my table, there is an icon that reveals a chart as a popup when hovered over. This div is where the chart is displayed: <div id="chart-outer" style="@style" class="popup-chart close"> <h2 id="charttitle&q ...

Preventing text size in Bootstrap from impacting the position of the next div

I've been grappling with this problem for a few days now. Essentially, what I have is the following code for a horizontal card layout where the image appears on the left and the text on the right. .title { overflow: hidden; text ...

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

A guide to implementing Nuxt.js (SSR) on a specific section of a WordPress (PHP) website

I currently have a WordPress (or PHP) application that is functioning well on every page. Now, I am looking to create a separate application called "marketing" under the segment "/marketing". To achieve this, I am utilizing Nuxt.js to tap into the strength ...

What is the easiest way to identify the currently rendered Vue component in a web browser?

In the Table.vue file, both Row.vue and Form.vue are included. The desired behavior is that the table's row will indicate that it comes from the Row.vue component. I tried to investigate by right-clicking on the Row element and selecting "View page ...

Blurring images with a combination of jQuery Backstretch and Blurjs

I have a background image displayed using Backstretch and want to apply Blur.js to blur elements on top of it. However, when I try to use Blur.js on the backstretched image, it doesn't work. I believe this is happening because Blur.js uses the CSS pro ...

mobile devices experiencing scroll due to absolutely positioned elements

Is there a way to have a webpage that takes up the full height and width of the client window, but restricts scrolling on mobile devices? I want to position div elements using absolute positioning with specific transformations, such as playing cards on a t ...

Utilizing arrays to dynamically alter the text color of specific words in an input field

Currently, I am in the process of working on a JSFiddle and find myself a bit puzzled by a certain aspect. Within my project, I have an input box named myTextField which contains a random paragraph. Additionally, there is a button that triggers my change f ...

Creating a striking Materialize Jumbotron: A step-by-step guide

Recently, I came across a sign up page that caught my eye. You can view it here. Upon inspecting the source code, I discovered that it was built using angular material design. This led me to wonder how I could achieve a similar look using Materialize.css ...