How to make last item in MUI stack align to bottom?-CodePudding

I am creating modal component, with MUI Grid but i want the Button to be at the bottom.

const styles = {
    modalBox: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        minHeight: '55%',
        maxHeight: '80%',
        maxWidth: '600px',
        bgcolor: '#ffff',
    },
}

Below is the ModalComponent.js

        <Modal
         ...
        >
            <Grid container sx={styles.modalBox} spacing={1} direction='column'  >
                <Grid item xs={12} height='auto'>
                    <Typography variant="h5">
                        List Title
                    </Typography>
                </Grid>
                <Grid item xs={12} height='100%' justifyContent='space-between'> //
                    <List height='100%'>
                        <ListItem>
                            one
                        </ListItem>
                        <ListItem>
                            two
                        </ListItem>
                        <ListItem>
                            three
                        </ListItem>
                    </List>
                    <Button variant="contained">
                        Create New List
                    </Button>
                </Grid>
            </Grid>
        </Modal>

I thought putting the height='100%' and justifyContent='space-between' would solve my issue but these props seem to do nothing.

CodePudding user response：

Set diaplay:flex and justifyContent:space-between to the Grid that is parent of List, then set flex-grow-1 to the List.

<Grid item xs={12} style={{display:'flex',height:'100%',flexDirection: 'row';justifyContent='space-between'}} > 

                <List style={flex-grow:'1'}}>
                    <ListItem>
                        one
                    </ListItem>
                    <ListItem>
                        two
                    </ListItem>
                    <ListItem>
                        three
                    </ListItem>
                </List>
                <Button variant="contained">
                    Create New List
                </Button>
            </Grid>

CodePudding user response：

You can:

add justifyContent={ 'space-between' } to the top <Grid container>,
place the <Button> component into its own <Grid item>, and
place the remaining items into a single <Grid item container> to separate them from the button.

This jsFiddle demo shows the result (click Run to see the demo). The code in the demo is displayed below (the JavaScript code is compiled in the demo and cannot be seen there).

index.html

<!DOCTYPE html>
<html>

    <head>
        <title>Material-UI Autocomplete Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <div id="testContainer" ></div>
        <script src="./index.js"></script>
        <noscript> Please enable javascript to view the site </noscript>
    </body>

</html>

index.jsx

// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import Typography from '@mui/material/Typography';
import Backdrop from '@mui/material/Backdrop';

const container = document.getElementById( 'testContainer' );

const styles = {
  modalBox: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    minHeight: '55%',
    maxHeight: '80%',
    maxWidth: '600px',
    bgcolor: '#ffff',
  },
}

const TestModal = () => {
  const [ open, setOpen ] = React.useState( true );

  const handleClose = () => { setOpen( false ) };

  return (
    <Modal
      open={ open }
      onClose={ handleClose }
      BackdropComponent={ Backdrop }
    >
      <Grid
        container
        sx={styles.modalBox}
        spacing={1}
        direction='column'
        justifyContent={ 'space-between' }
      >
        <Grid item container>
          <Grid item xs={12} height='auto'>
            <Typography variant="h5">
              List Title
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <List height='100%'>
              <ListItem>
                one
              </ListItem>
              <ListItem>
                two
              </ListItem>
              <ListItem>
                three
              </ListItem>
            </List>
          </Grid>
        </Grid>
        <Grid item>
          <Button variant="contained">
            Create New List
          </Button>
        </Grid>
      </Grid>
    </Modal>
  );
};

ReactDOM.render(
  <TestModal />,
  container
);