Adjusting the height of the v-footer

I'm having trouble adjusting the height of the v-footer component. According to the documentation, I should be able to use the height prop, but when I try height="100px" or height="50%", the footer doesn't change. What could be causing this issue?


        <v-footer absolute class="bg-light-blue-lighten-3 d-flex flex-column justify-center align-center"  height="100px">
            <p class="font-weight-bold text-h6">sample text</p>
            <p class="font-weight-bold">sample text</p>
            <p>sample text</p>
            <p>sample text</p>
            <p><v-icon icon="mdi-map-marker"></v-icon>location<p>
        </v-footer>

Here is an image of the footer: https://i.sstatic.net/FymFNYzV.png

cssvue.jsvuetify.jsfooter

Answer №1

What is the value of your overflow-y property? If you set it to either "scroll" or "hide", the size will be fine.

    <!DOCTYPE html>
        <html>
            <head>
                <style>
                    v-footer {
                        background: red;
                        position: absolute;
                        height: 100px;
                        overflow-y: hidden;
                    }
                </style>
            </head>
        <body>
        <v-footer absolute class="bg-light-blue-lighten-3 d-flex flex-column justify-center align-center"  height="100px">
            <p class="font-weight-bold text-h6">example text</p>
            <p class="font-weight-bold">example text</p>
            <p>example text</p>
            <p>example text</p>
            <p><v-icon icon="mdi-map-marker"></v-icon>location<p>
            </v-footer>
        </body>
    </html>

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

What is the best way to align isotope and organize its components?

I have searched for solutions to my issue with centering isotope on my project, but none of the existing answers were sufficient. I am facing challenges trying to center isotope without creating extra space between its elements and arranging them in a spec ...

htmlcssjquery-isotope

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...

javascriptjqueryhtmlcss

Develop and arrange badge components using Material UI

I'm new to material ui and I want to design colored rounded squares with a letter inside placed on a card component, similar to the image below. https://i.stack.imgur.com/fmdi4.png As shown in the example, the colored square with "A" acts as a badge ...

javascriptcssreactjsmaterial-ui

Turn off hover effect using solely CSS

This is my first time posting on stackoverflow, so please excuse me if I overlook something obvious. I tried searching for a solution beforehand but couldn't find one that seemed relevant. In the following jsfiddle example, I have a div that acts as ...

csshover

The functionality to display dynamic images in Vue.js appears to be malfunctioning

As a newcomer to vue.js, I am facing a challenge in dynamically displaying images. Manually changing the images works fine, but I'm running into issues with dynamic display. I've come across similar problems online, but none of the solutions seem ...

javascripthtmlcssvue.js

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

javascriptjqueryhtmlcss

I'd love some clarity on the concept of stacking contexts

After encountering a bug with a non-clickable video player inside a jquery ui dialog, I resolved the issue by changing position:relative; to position:inherit; Other solutions included removing position:relative; altogether or adjusting the z-index of the ...

cssz-index

Tips for transferring data and events between named views within Vue Router

I have a layout structured like this: .------------------------+----------------. | Current Tab Title | Controls | +------------------------+----------------+ | Tab1 Tab2 [Tab3] | +---------------------------------------- ...

javascriptvue.jsvue-router

Memory leaks in Vue: Increasing memory usage occurs every time the v-if value is altered

In my project, I am dealing with numerous components called X, each of which contains even more nested components. All instances of X have a v-if=“show” attribute that is toggled by the user. The strange issue I've encountered is that every time t ...

vue.jsmemory-leaks

Transform the Vue.js component into a Webpack component

I found this code in a tutorial and now I need to make some modifications so it can be compiled with Webpack, including the template script and CSS files. <html> <head> <title>VueJs Instance</title> <s ...

javascriptvue.jswebpack

Webpage Text Animation

This is the visual representation of my webpage: https://i.stack.imgur.com/tYq34.png I am seeking to implement a uniform animation effect for the text "Carlos Qiano" and "Lorem Ipsum", similar to the link below: https://i.stack.imgur.com/XVnBS.jpg Note: ...

javascripthtmljquerycssanimation

Mapping a list of keys to Firebase objects in Vue.js

I am currently working on a compact web application using Vue.js and Firebase for data storage and synchronization. The app consists of storing 'items' with attributes like 'title' and 'subtitle', and 'lists' with an ...

javascriptfirebasefirebase-realtime-databasevue.jsvuefire

Working with VueJS v-for directive inside Laravel Blade template

Is there a way to create a list in Laravel (v7) Blade using VueJS v-for method? In home.blade.php: <template v-for="(item,index) in this.list"> <qm-item number="@{{index}}"></qm-item> </template> When checking the source code ...

laravelvue.js

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

cssreactjsnext.jstailwind-css

Unable to simulate axios API call using axios-mock-adapter in Storybook for Vue.js

I have been attempting to integrate storybook into my VueJS project, but I am facing an issue with mocking API calls. I tried utilizing axios-mock-adapter without success. This is the code snippet from my Storybook file: import { storiesOf } from '@ ...

vue.jsaxiosstorybookaxios-mock-adapter

Achieving Centered Items with CSS Flexbox and Positioning

Struggling to arrange 3 elements using flexbox while keeping them centered both horizontally and vertically. Here is the desired layout: https://i.sstatic.net/Uo6WS.png This is my current attempt, but it's not working as expected. Can anyone spot t ...

htmlcssflexboxflexboxgrid

Uninstalling Vue.js from a Rails application using webpack

After using the command line to install Vue.js, I'm now looking to uninstall it. Is there a way to revert the installation process? bundle exec rails webpacker:install:vue Any guidance on removing Vue.js would be greatly appreciated. ...

ruby-on-railsvue.jswebpack

I am experiencing issues with my Vue.js - Cordova app on IOS13, as it seems that incoming requests and internet

As I prepare to release an updated version of my app, I am encountering significant challenges with IOS13. Although the app is functional on IOS13 devices, it is unable to connect to a server or load images from the web. Interestingly, this issue does not ...

cordovavue.jsios13

The Vue.js component initializes without waiting for the axios.get() request to complete

One of my Vue components includes a prop named objects: <Table :objects="orders"/> When using axios.get() in the mounted() lifecycle hook to retrieve data from Directus CMS, the code looks like this: this.orders = await this.axios.get(&apo ...

vue.jsaxiosvue-props

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

javascriptjqueryhtmlcssjson