Guide to positioning an item at the bottom of the screen using Material UI

Can anyone help me align a button to the bottom of the screen so that it remains in place even when scrolling through a list? I've tried adjusting the code but can't seem to get it right.

This is how my current screen appears, with the button always centered while scrolling: https://i.sstatic.net/uV6pV.png

Here's the code I have for this:

<Link to={"/checkout-summary"}>
          <div className="checkoutbtn">
            <Button
              style={{
                boxShadow: "none",
                borderRadius: "0px",
                position: 'absolute',
                bottom: 0
              }}
              variant="contained"
              color="primary"
            >
              Check Out
            </Button>
          </div>
        </Link>
htmlcssreactjsmaterial-ui

Answer №1

Ensure the footer stays at the bottom of the page

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  footer: {
    position: 'fixed',
    bottom: 0,
    width: '100%',
    height: 60,
    textAlign: 'center'
  }
}));

const classes = useStyles();

<Link to={"/checkout-summary"} className={classes.footer}>

Answer №2

import { styled } from '@mui/system';

const FooterMessage = styled('div')({
    position: 'fixed',
    bottom: 0,
    width: '100%',
    height: 60,
    textAlign: 'center',
});

<MyMessageBox>Content within this will display at the bottom of the webpage</MyMessageBox>

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

Babel does not compile files located in the parent directory

Is it possible to instruct babel to transpile files that are located outside of the current (root) directory? This is how my project structure looks like: |-project |build |-node_modules -.babel.rc -package.json ...

reactjsmocha.jsbabeljses6-modules

What is the best way to activate a click event when I set a radio button to checked?

I am facing an issue with an uninitialized property in my app.component.ts: color!:string; I am trying to automatically initialize the color property when a radio button is selected: <div> <input type="radio" name="colors" ( ...

javascripthtmlangular

Step-by-step guide to automatically submitting a form after obtaining geolocation without the need for manual button-clicking

I am looking for a way to automatically call a page to get geolocation data, and then submit the form to my PHP page with the values of getlat and getlon without the need to click a submit button. I have tried implementing the code below, however, despit ...

javascriptphphtmlgeolocation

When attempting to click on the dropdown in Bootstrap, there is no content displayed

I am currently practicing Bootstrap and focusing on implementing Dropdowns. However, I am facing an issue where upon clicking the Dropdown button, nothing appears on the screen. Preview when it's not clicked Preview when it's clicked Here is m ...

javascripthtmlcssbootstrap-5

Struggling to display the Three.js LightMap?

I'm having trouble getting the lightMap to show on my mesh. Here's the code I'm using: loader.load('model.ctm', function (geometry) { var lm = THREE.ImageUtils.loadTexture('lm.jpg'); var m = THREE.ImageUtils.loadT ...

javascripthtmlthree.js

Encountering an issue in the test file when using react-router-dom v6: "The 'history' property is not found on the 'IntrinsicAttributes & RouterProps' type."

Main script: import { useContext, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import AuthenticationContext from './AuthenticationContext'; function HandleOAuthCallbackRoute() { co ...

reactjstypescriptreact-routerreact-router-dom

Tips for updating a specific portion of a component in react.js

import React,{useEffect} from 'react'; import CloudTables from '@cloudtables/react'; import { useState } from 'react'; function DataGridTable ({ input1Value, input2Value }) { return ( <div className="con ...

javascriptreactjsdatatabledatagridjavascript-objects

Move the Material UI popover to the clicked icon's position

I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. https://i.sstatic.net/yvKjF.png Here is the code snippet that I have been using: {showPopOver &&a ...

cssreactjsmaterial-uipopover

Is there a way to showcase whitespacing in HTML?

I have a database full of content that includes whitespace formatting for display on a webpage. However, when viewed on Stackoverflow using the code tag, the formatting changes. The second way shows how it is stored in the database and how I want it to app ...

htmlasp.net-mvcformattingwhitespace

Guide for specifying type when passing a component as a prop

Struggling to successfully pass a component as a prop to a straightforward functional component called RenderRoute: interface RouteProps { component: React.ComponentType; isProtected: boolean; isLoggedIn: boolean; path?: string; exact?: boolean; ...

reactjstypescript

Redux toolkit does not synchronize with Socket.io

Imagine a scenario where you have developed a chat app similar to WhatsApp Web. In this app, the chat section displays all chats on the left and in the middle. Upon user login, the first contact is saved in the Redux store as selectedChatUser. All the cha ...

reactjssocketsreduxnext.jssocket.io

Discovering an HTML Element in a JavaScript Array with Specific Styling: A Step-by-Step Guide

I am in the process of developing a website that consists of different sections. The concept is simple - by clicking on a button located at the bottom of the page, it will reveal the corresponding div section. For styling purposes, I have initially hidden ...

javascripthtmlcssarraysfilter

Styling the first visible item in ngRepeat using Angular

I am working with a list that is generated using ngRepeat, which looks like this <ul class="list-group"> <li class="list-group-item" ng-repeat="data in tree | filter:key"> {{data.name}} </li> </ul> My goal is to ma ...

cssangularjsangularjs-ng-repeat

Modifying an object's attribute in React.js by toggling a checkbox

As I delve into learning React, I am constructing a straightforward todo list. Here's the object contained within my initialState: getInitialState:function(){ return { items: [ { text:"Buy Fish", ...

javascriptreactjs

Gradient Border on CSS Button

I'm trying to create a button with a silver-ish border and gradient like the one in the picture. I've managed everything except for the border, which is giving me some trouble. Here's the current CSS code I'm using for the button. http ...

htmlcssbutton

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...

jquerycssjquery-plugins

Navigating with Express while incorporating React

I am struggling to set up the routes for my web application using Express, as well as incorporating React for the front end. The issue lies in properly routing things when React components are involved. My index.html contains: <script> document.get ...

javascripthtmlreactjsexpress

Is incorporating props into React hooks a viable option?

Can Y from props be used in hooks with component X?cod import React, { useState } from "react"; function X({ y }) { const [index, setIndex] = useState(y); const ADD = () => { setIndex(index + 1); }; return ( <div> {index} ...

reactjs

Tips to avoid the page from scrolling to the top when the menu is opened

Whenever a user taps the menu button on the page, a full-page menu opens. However, there is an issue - the main content page automatically scrolls to the top. Can you provide suggestions on how to prevent this from happening? I have already looked into a s ...

javascripthtmlcss

Passing data from getServerSideProps to an external component in Next.js using typescript

In my Index.js page, I am using serverSideProps to fetch consumptions data from a mock JSON file and pass it to a component that utilizes DataGrid to display and allow users to modify the values. export const getServerSideProps: GetServerSideProps = async ...

javascriptreactjstypescriptnext.jsmaterial-ui