VueJS component fails to remain anchored at the bottom of the page while scrolling

I am currently using a <md-progress-bar> component in my VueJS application, and I am trying to make it stay fixed at the bottom of the screen when I scroll. I have attempted to use the styles position: fixed;, absolute, and relative, but none of them seem to work.

<template>
  <div>
  ...
    <md-progress-bar style="position: absolute;" md-mode="indeterminate" v-show="true"></md-progress-bar>
  </div>
</template>

In addition...

<md-progress-bar
  style="position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;"
  md-mode="indeterminate"
  v-show="true"
></md-progress-bar>
javascriptcssvue.jsvue-material

Answer №1

Vue.use(VueMaterial.default)

new Vue({
  el: '#app'
})
div.md-progress-bar--fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.spacer {
  height: 1000vh;
}

.as-console-wrapper {
  display: none !important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">

<div id="app">
 <div class="spacer"></div>
  <md-progress-bar class="md-progress-bar--fixed" md-mode="indeterminate" v-show="true"></md-progress-bar>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
</script>

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

"Ionic 3: Utilizing the If Statement within the subscribe() Function for Increased Results

I added an if conditional in my subscribe() function where I used return; to break if it meets the condition. However, instead of breaking the entire big function, it only breaks the subscribe() function and continues to execute the navCtrl.push line. How ...

javascripttypescriptionic-frameworkionic3

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

I have set up my next.config.js file with the following configuration: const withSass = require('@zeit/next-sass'); const withCss = require('@zeit/next-css'); module.exports = withSass(withCss({ webpack (config) { config.module. ...

cssreactjssassnext.js

`Error encountered when attempting to convert date with Angular JS filter`

Utilizing angular js filter in the controller for date formatting. A user selects a date from a uib-datepicker-popup. The goal is to format this date using ISO 8601 (yyyy-mm-dd) date format. Upon logging the user-selected date, the output is as follows: S ...

javascriptangularjsdateangularjs-filter

Is there a way to modify the appearance of blocks in Scratch/Blockly?

I am currently working on customizing the appearance of the blocks in Scratch by looking into adjusting the GitHub repository of scratch-blocks (https://github.com/LLK/scratch-blocks). There is a chance that I might need to modify the GitHub repository of ...

javascriptreactjsmit-scratchgoogle-blockly

Tips for showcasing the individual product page in full width on woocommerce

Here is a link to the single product page: I am wondering if it's possible to extend the product summary drop-down menus all the way to the right without impacting the mobile site? Thank you. ...

phphtmlcsswordpresswoocommerce

The AngularJS directive seems to be having trouble receiving the data being passed through its scope

Check out this HTML code snippet I created: <div ng-controller="ctrl"> <custom-tag title = "name" body = "content"> </custom-tag> </div> Take a look at the controller and directive implementation below: var mod = angular.mod ...

javascripthtmlangularjs

The Vuetify asynchronous search feature is only able to send single characters at a time, and it doesn't concatenate the characters

In my Vue component, I have the following code: <template> <v-form ref="form" @submit.prevent="search"> <v-row class="pa-0"> <v-col cols="12" md="2" class="d-flex"> <v-autocomplete ...

vue.jsvuejs2vuetify.js

Tips on retrieving the API response using AJAX

Currently, I am attempting to retrieve the API response from Flickr using Ajax in my application built with Laravel. To accomplish this, I have established a specific Route and function dedicated to handling API calls. //Route.php Route::post('/getlo ...

javascriptphpjqueryajaxflickr

Building with Webpack on a started Express server can be achieved by following these steps

Hello there, I am diving into the world of React and Webpack. My configuration in `webpack.config.js` looks like this: const webpack = require('webpack'); const path = require('path'); module.exports = { cache: true, entry: { ...

javascriptnode.jsreactjsexpresswebpack

Is it possible to use JavaScript to clear a field that was generated by Yii CRUD?

Issue with Yii's GRUD field generated and Firefox HTML: <?= $form->field($model, 'productId')->textInput(['maxlength' => true]) ?> Comparison of PHP generated code to Firefox HTML: <input id="taolistforcreate-p ...

javascriptphpjqueryyii

Revitalize website when submitting in React.js

I need assistance with reloading my React.js page after clicking the submit button. The purpose of this is to update the displayed data by fetching new entries from the database. import React, {useEffect, useState} from 'react'; import axios from ...

javascriptreactjsaxiosuse-effect

Setting dynamic image dimensions within a div element

Is there a way to display the div width in percentage even when the image is not loaded? The image sizes are mentioned in percentage and they load dynamically, making it impossible to fix their size. How can we ensure that the div maintains the correct wid ...

htmlimagecss

Ensuring Consistency in Array Lengths of Two Props in a Functional Component using TypeScript

Is there a way to ensure that two separate arrays passed as props to a functional component in React have the same length using TypeScript, triggering an error if they do not match? For instance, when utilizing this component within other components, it sh ...

javascriptreactjstypescript

Executing a JavaScript function through a hyperlink created by an AJAX request

Having a JavaScript function here. I am performing an AJAX call, and within the received content, there is a link that needs to trigger the JavaScript function. MyJavascriptFunction(bla){ alert (bla); } ...

javascriptajax

Importing modules in Node can be done after the code has been executed, or through ESM Dynamic

I am currently working on a project in nodejs and express, and I am facing an issue where I need to execute certain code before importing modules. The app is already set up to use import for modules instead of require, and changing this setting is not an o ...

javascriptnode.jsnode-modules

In search of a tool that enables horizontal scrolling of content

I am on the lookout for a piece of Javascript code that can be integrated into my website to enable me to horizontally scroll content either from left to right or right to left. Although I found this script here: It offers the fundamental functionality th ...

javascript

Attempt to generate a function in JavaScript that mirrors an existing one

How can I create a javascript function similar to loadAllOriginal, but with the value of the variable allEmployees being a list of employee objects (ID, FirstName, LastName)? I am attempting to implement this method in combination with autocomplete from ...

javascriptangularjs

hiding an "input type="file" element by using a button to conceal it

Is it possible to create a button that triggers file upload functionality? I couldn't find any solutions on Google. I've heard it can be done with labels, but I specifically need to use a button for better UX/UI. <button style="position:fixe ...

jqueryhtmlcssbuttoninput

Guidance on modifying a sub row within a main row in Sails.js

I am currently working on a sails.js application This is the model structure for my application: name: String, address:String, appSettings: { header: String, color : String, font: String, } In my development process, I have utilized independ ...

javascriptnode.jsmongodbsails.js

Create a query string using JavaScript and combine multiple parameters into a single param

I am facing a challenge where I need to construct a query string in JavaScript and nest various parameters within one of the parameters. In PHP, I can achieve this using the http_build_query function. However, when attempting to do the same in JavaScript, ...

javascriptphpecmascript-6javascript-objects