CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
aditya kumar
aditya kumar

Reputation: 3023

How to Align Item at the bottom of the screen In material ui

I am trying to align button at the end of the screen so that even if i scroll background list still the button should remain at the bottom of the screen. I tried and unable to figure this out. Anyone please help me to do so.

This is how my screen looks like. Right Now it always come in the middle of the screen while scrolling . Scroll Image

Here is My code 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>

Upvotes: 3

Views: 6060

Answers (2)

Amar kumar
Amar kumar

Reputation: 1

import { styled } from '@mui/system';
    
const MyMessageBox = styled('div')({
    position: 'fixed',
    bottom: 0,
    width: '100%',
    height: 60,
    textAlign: 'center',
});
      
<MyMessageBox>Contents inside this will be shown at the bottom of the page</MyMessageBox>

Upvotes: 0

keikai
keikai

Reputation: 15146

Fix the footer to the bottom

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}>

Upvotes: 3

Related Questions