Creating a seamless experience with Vue.js 3 and Bootstrap 5's Sticky Footer functionality

This template was created based on the Bootstrap 5 Sticky Footer and Nav example, but with a twist. I am implementing Vue.js 3 in my project, and encountered an issue where adding my custom script within the id="awApp" element caused the sticky footer functionality to break. Instead of staying fixed at the bottom of the page, the footer started floating up right under the body. However, it's crucial for me to have the footer included in the Vue app because I need to compute a dynamic date within it.

Requirement: The footer must remain sticky at the bottom (not fixed) while allowing for the computation of a live copyright date.

javascriptvue.jsvuejs3bootstrap-5

Answer №1

It is important to note that the body tag should be placed at the top level and not nested within another component of your app. If it is nested, the browser will automatically move it outside:

<!-- Incorrect -->
<div id="awApp">
  <body></body> ❌
</div>

<!-- Correct -->
<body>
  <div id="awApp"></div> ✅
</body>

If you want the app to occupy 100% of the viewport height, make sure to use the vh-100 class instead of h-100, which only fills up the available space:

<div id="awApp" class="vh-100">

Check out this demo for a visual representation.

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

Incorporate a personalized array into Google Autocomplete Places using AngularJS

I'm working on my application and I've implemented autocomplete for Google Places using the gm-places-autocomplete directive. However, I would like to enhance this autocomplete feature by incorporating my custom array of locations along with the ...

javascriptjqueryangularjsautocompletegoogle-places-api

What is the method for initiating a POST request in Java Script without including any data?

Currently, I am utilizing Ajax to send an array to the router, as demonstrated below... var send = function () { var data = search console.log(data) $.ajax({ type: 'post', url: ...

javascriptnode.jsajaxexpressmongoose

Disable Stripe with a testing credit card number

I successfully implemented a basic checkout system with Stripe and tested it using the following test credit card number: 424242424242 However, I now need to switch to development mode and prevent Stripe from recognizing all test credit card numbers as v ...

javascriptnode.jsexpressstripe-payments

Bootstrap 5 div containing footer

Struggling to achieve this in HTML using Bootstrap 5, any assistance would be greatly appreciated. https://i.sstatic.net/ghsb8.png The overall concept is clear, but encountering an issue with the initial image. https://i.sstatic.net/MOPmJ.png ...

bootstrap-4bootstrap-5

Ways to import a library in JavaScript/TypeScript on a web browser?

I'm currently working on a project that involves a TypeScript file and an HTML page. Right now, I am loading the necessary libraries for the TypeScript file in the HTML Page using script tags like <script src="https://unpkg.com/<a href="/cd ...

javascripttypescript

How come my button function is yielding output just once?

Currently, I am exploring the functionalities of a basic VSCode extension webview. My main goal is to trigger a message display every time a button is clicked, but I have encountered an issue where the message only appears the first time. Below is my HTML ...

javascripthtmlnode.jsvisual-studio-codevscode-extensions

Using jQuery to find a specific value within a string and deleting everything before the <li> tags

Within this snippet of code, there is a block of text categorized as a string due to ACF's functionality: <div class="acf-fc-popup"><ul><li><a href="#" data-layout="two_column_layout" data-min="0" data-max="0">Two Column Layou ...

javascriptjquery

bcrypt is failing to return a match when the password includes numeric characters

I've integrated node-bcrypt with PostgreSQL (using Sequelizejs) to securely hash and store passwords. In the process, the user's password undergoes hashing within a beforeValidate hook as shown below: beforeValidate: function(user, model, cb) { ...

javascriptnode.jsexpressbcrypt

Position-fixed Vuetify notification component

Struggling to create a VueJS/nuxtjs alert component that behaves like a snackbar with a fixed-bottom position, but can't find much relevant documentation. Despite exploring the vuetify alert component API and comparing it to the snackbar component, I ...

vue.jsnuxt.jsalert

Autoheight iframes, similar to those found on eBay,

Is there a method to adjust the height of an iframe in the y-axis so that the content properly fits within it? The challenge lies in finding solutions that work within the constraints imposed by modern CORS and Same Origin policies enforced by web browser ...

javascriptiframeheight

Tips for retrieving HTML file content as a string using JavaScript

I'm looking to retrieve the contents of an HTML file using JavaScript and store it as a string. I tried writing some code for this purpose, but unfortunately, I encountered an error: Error: Cannot find module 'xmlhttprequest' Could someone ...

javascripthtmlnode.js

Creating polished landscapes using elevation map in Three.js

I'm currently working on generating smooth terrain using the PlaneBufferGeometry feature of three.js, utilizing a height map sourced from Google Images: Unfortunately, I'm encountering some choppiness in the result.. (Apologies, this happens to ...

javascriptthree.js

I have decided to forego the method I initially wanted to use

click here for image description I am using a method that is successfully performing its function, as I can see the URL in the console output. However, I am puzzled by why the method name appears scratched out. Despite this visual cue, the method is funct ...

javascripthtmlcss

Discovering an arbitrary entry in Mongoose: Tips and Tricks

What is the best way to retrieve random records from MongoDB? I have come across various articles on StackOverflow discussing this topic, but I am struggling to grasp the concept. For instance: db.yourCollection.find().limit(-1).skip(yourRandomNumber).ne ...

javascriptmongodbmongoose

Ensure that all asynchronous code within the class constructor finishes executing before any class methods are invoked

Looking to create a class that takes a filename as a parameter in the constructor, loads the file using XmlHttpRequest, and stores the result in a class variable. The problem arises with the asynchronous nature of request.onreadystatechange, causing the ge ...

javascriptasynchronouscallbackxmlhttprequestes6-class

Summing up numbers within a hierarchical table using jQuery

There are two tables, each with their own unique ID as shown below: <table id="cvo"> <tr id="1"> <td>C</td> </tr> <tr id="2"> <td>C</td> </tr> <tr id="3"> <td>O</ ...

javascriptjquery

The processing time for this request is unreasonably long

My website is built using Laravel and Vue.js. I am facing an issue where a function takes more than 2 minutes to execute, resulting in the following error: 500 Internal Server Error Request Timeout This request takes too long to process and is timed out b ...

phplaravelvue.js

Tips for implementing a function within a toggle button

I am looking to enhance the functionality of a toggle button when it is changed. Currently, there is no action associated with the toggle change event. I want to create a method that will be executed when the toggle is switched on or off. Additionally, I n ...

javascriptjqueryhtmlcss

Images on web pages are automatically resized to fit into a smaller preview window

Currently, I am facing an issue with the display of images in my grid windows on my website . The images are appearing as partial representations instead of rescaled versions where the whole picture is resized to fit the grid window. I have attempted mod ...

javascripthtmlcssweb

Utilizing Shared Models Across Nested ng-Change Controllers

Within my AngularJS application, I am faced with the challenge of utilizing a value from an input/dropdown field in the second controller when a change event occurs. The structure of my code is as follows: Code snippet (HTML) :: <body ng-app="myApp" ...

javascriptangularjs