React web bottom half modal

Question

I'm building a resposinve version of an app using React JS and I'm looking for a bottom half modal component. Like the one in react-native-modal. I'm also using material-ui, I'm not sure if I can make a change in the modal dialog to get the same result.

you're building a react-native application? – Akber Iqbal Oct 19 '20 at 23:08 — Akber Iqbal, Oct 19 '20 at 23:08

score 1 · Accepted Answer · answered Oct 20 '20 at 01:01

You can customize the Dialog styles with makeStyles utility from material-ui to achieve that behaviour, when the screen reach the xs breakpoint the responsive styles are applied.

import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";

import "./styles.css";
const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("xs")]: {
      alignItems: "flex-end" // push the dialog to bottom
    }
  },
  paper: {
    // make the content full width
    [theme.breakpoints.down("xs")]: {
      margin: 0,
      maxWidth: "100%",
      width: "100%"
    }
  }
}));

function App() {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const openDialog = () => setOpen(true);
  return (
    <div className="App">
      <Button onClick={openDialog}>Open dialog</Button>
      <Dialog
        open={open}
        onEnter={console.log("Hey.")}
        classes={{ container: classes.root, paper: classes.paper }}
      >
        <DialogTitle>Hello CodeSandbox</DialogTitle>
        <DialogContent>Start editing to see some magic happen!</DialogContent>
      </Dialog>
    </div>
  );
}

You can see it working here https://codesandbox.io/s/material-ui-dialog-sample-forked-pjd64?file=/src/index.js:41-1162 (resize window to see how it changes)

Thanks @diedu, thats exactly what I needed – utiq Oct 20 '20 at 18:37 — utiq, Oct 20 '20 at 18:37

Akber Iqbal · Answer 2 · 2020-10-20T00:33:51.537

You can use reactstrap for it with the following CSS:

.modal-content {
  position: absolute;
  bottom: 0;
}

.modal.show .modal-dialog {
  height: -webkit-fill-available;
}

working example stackblitz with reactstrap here

or using material-UI, use the following css (400px is width of div, which has 32px padding on both sides)... so 232px is half of this number and gives us centered div always:

.modalBody {
  left: calc(50% - 232px);
  bottom: 0;
}

following change in JS from material-UI's Modal example:

  const body = (
    <div className={`${classes.paper} modalBody`}>
      <h2 id="simple-modal-title">Text in a modal</h2>
      <p id="simple-modal-description">
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
      </p>
      <SimpleModal />
    </div>
  );

working example on code-sandbox here

React web bottom half modal

2 Answers2