[Bug] Signup Modal not mobile compatible

[rickstaa]

Version

1.9.0

Reproduction link

https://demos.creative-tim.com/material-kit-pro-react/#/components

Operating System

Ubuntu 20.04, windows 10

Device

Hp Zbook G5

Browser & Version

Chrome v8.0.4324.150, firefox v85.0.1

Steps to reproduce

1. Go to components page
2. Click the signup modal.
3. Open the firefox or chrome mobile view.
4. See that the top of the modal is not visible.

What is expected?

The modal should be displayed correctly like the login modal when viewing the site using a mobile device.

What is actually happening?

The top parts of the modal are not visible.

---

Solution

I noticed that this issue is fixed by:

• Removing the margin-top: 130px !important; rule on the .jss1682 class.
• Removing the height: 100% on the .MuiDialog-container class.

[einazare]

Hey, @rickstaa ,

Thanks for this, and for the solution.
We'll add your solution on our next update.

Best,
Manu

[rickstaa]

@einazare Great thanks for including the solution in the next update. Keep in mind that the solution came from a quick debugging session. It seems to work, but, I did not thoroughly test it. As a result, there might, therefore be a more suitable solution.

[rickstaa]

I now use the following in my project. I keep an eye on when your update is available.

Modal code changes

    <Dialog
      classes={{
        root: classes.modalRoot,
        paper: classes.modal + " " + classes.modalSignup,
+     container: classes.containerSignup,
      }}
      open={open}
      TransitionComponent={Transition}
      keepMounted
      onClose={onClose}
      aria-labelledby="signup-modal-slide-title"
      aria-describedby="signup-modal-slide-description"
    >

JSS changes

modalStyles.js

  modal: {
    [theme.breakpoints.up("sm")]: {
      maxWidth: "500px",
      margin: "auto",
+      marginTop: "130px !important",
    },
    borderRadius: "6px",
    overflow: "visible",
    maxHeight: "unset",
    width: "100%",
-    marginTop: "130px !important",
  },

signupModalStyles.,js

+  containerSignup: {
+   [theme.breakpoints.down("sm")]: {
+      height: "inherit", // Prevent matUI default from pushing part of model out of screen
+    },
+ },