Position the button at the bottom of the page with MUI v5 in a React application

How can I ensure the button is always positioned at the center bottom of the page, regardless of the content height?

This is a snippet from my code:

const useStyles = makeStyles({
  button: {
    bottom: 0,
    right: 0,
    position: "absolute"
  }
});

export default function Home() {
  const classes = useStyles();
  return (
    <div>
      <Box>
        <Box>
          <Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
            Some data
          </Paper>
        </Box>
        <Box textAlign="center">
          <Button
            className={classes.button}
            variant="contained"
            sx={{ width: "200px" }}
          >
            Submit
          </Button>
        </Box>
      </Box>
    </div>
  );
}

I have also prepared a demo using CodeSandbox. Can anyone provide assistance?

Answer №1

This pertains more to CSS styling (check out another post), but if you manually define the width of the Button, you can position it 50% from the left and then adjust its left margin by half of its width:

bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"

view example

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

Requesting Axios.get for the value of years on end

I'm grappling with obtaining a JSON file from the server. The endpoint requires a year parameter, which needs to be set as the current year number as its value (e.g., ?year=2019). Furthermore, I need to fetch data for the previous and upcoming years a ...

What is the best way to find all documents based on a particular field in MongoDB?

Within my MongoDB database, I have a collection of bets structured like this: { id: String, user_id: String, type: String, events: [{ eventID: String, sport: String, evento: String, ...

Placing error notifications beneath my table rows for a more polished appearance

In the process of creating a review page for my app that showcases uploaded files, I've encountered an issue. Whenever a user uploads files with errors, I want to display a warning message below each specific file. Currently, I'm able to show the ...

Tips for locating the index of the previously selected active class

I am currently working on a slider and have made progress up to this point. However, I am facing an issue where I cannot proceed because I need to identify the index of the item from which I removed the last active class before the click event occurs. My ...

When I incorporate a query, the value for this.props.location becomes undefined

Is there a way to add a query parameter like mobile=true to the URL in order to access a slightly modified page? I have successfully implemented this in App.js using the code const mobileAp = location.search.indexOf("mobile=true") > -1;. However, when I ...

How can I ensure that an absolutely positioned element [created with React] snaps to the edge of its parent div when the page loads

I am currently developing a unique two-thumb slider bar component using React. Each thumb in the slider snaps to the closest discrete tick so that users can easily select values along a number line visually. One challenge I'm facing is that the thumbs ...

Can files in a directory be listed using JavaScript without the need for HTML tags?

Currently, I am exploring ways to automate an Angular application using Protractor. During this process, I encountered a situation where I needed to retrieve a list of all the files within a specific folder. In Java, I am aware that we can accomplish this ...

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

While trying to utilize the HTML5 API along with SoundManager2, I encountered an issue. My goal was to determine the duration of a song in order to create a progress bar that would update as the song played. However, every time I attempted to retrieve the ...

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...

Establish and define the global variable "Protractor"

In order to pass a string value from the function editPage.CreateEntity();, you can use that value in multiple test cases by assigning it to the variable entityName. You are able to retrieve the value by setting up the test case as follows: fit('Te ...

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

Utilizing Promises in the apply function

I am currently working on a project in Node.js that utilizes bluebird for promise handling, as well as ES6 native promises. In both projects, I have a chain where I make a database query structured like this: some_function(/*...*/) .then(function () ...

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

Trouble with defining variables in EJS

Recently delving into the world of node development, I encountered an issue with my EJS template not rendering basic data. I have two controllers - one for general pages like home/about/contact and another specifically for posts. When navigating to /posts ...

What is the best way to toggle between rendering two components or updating two outlets based on a route in React Router?

There is a React application I am working on that utilizes React-Router. My layout component has the following structure: import React from 'react'; import Header from './components/Header/Header'; import Footer from './components/ ...

The utilization of the Angular date pipe significantly impacts the way dates are

When I use the pipe date:'MM/dd/YYYY' to display the date 2022-01-01T00:00:00, it shows as 1/01/2021 instead of 1/01/2022. This issue only occurs with this specific date. Why does this happen? The value of pharmacyRestrictionDate is 2022-01-01T0 ...

Is it possible to transform a .csv document into a JavaScript array with dictionaries? Each dictionary's keys would correspond to the column headers in the .csv file, and the values would be the

Let's imagine a scenario where I have a .csv file with the column headers listed in the first row, and their respective values are provided in the subsequent rows as shown below: index,id,description,component,service 0,5,lorem ipsum,7326985,Field Ser ...

Looking to install nodemon for Node.js on macOS? If you're encountering a "command not found" error, here's

After installing nodemon using the command npm install -g nodemon, I encountered a Permissions issue. To resolve this, I used the sudo npm install -g nodemon command. However, when attempting to run the "nodeman" command, I kept receiving an error that s ...

Access environmental variables within Next.js middleware

Within my nextjs project, I have declared variables in both the .env and next.conf.js files. The code snippet from the next.conf.js file looks like this: module.exports = { env: { NEXT_PUBLIC_JWT_SECRET: "...", }, publicRuntimeConfig: { ...

React - the function this._onSubmit is not functioning as expected

I'm currently developing a basic web application using node, express, and react. Although my routes are functioning properly and I am able to render views, the events within my views are not triggering. One of the views gets rendered but its events a ...