Issues with Modal scrolling/overflow sizing.

Hi guys,

I’m having an issue with a simple modal that I am trying to implement in a react/flux project. Here is the code for the Modal component (for testing purposes).

'use strict';

//Library Dependencies
const React = require('react');
const Modal = require('react-modal');

const AmazonModal = React.createClass({

  render() {

    //Modal Config
    const customStyles = {
      content : {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)'
      },
      overlay: {
        zIndex: 10
      }
    };

    return (

      <Modal
        isOpen = { this.props.modalIsOpen }
        onRequestClose = { TBD }
        style = { customStyles } >

        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>

     </Modal>

    )
  },

  _closeModal() {
    this.props.closeModal();
  }

});

module.exports = AmazonModal;

Currently I have two Issues that I cannot solve:

The Modal is rendering but I am unable to see the full content of the modal. I am unable to scroll through the content. When I scroll it simply scrolls through the greyed out content behind it. I tried playing with all overflow settings for the content/overlay…but had no luck getting the desired outcome.

1. I would like to be able to scroll through the content of the modal itself so that I can see all of the elements within…
2. With this much content within the modal the top and the bottom borders of the modal are not even visible within the window… they appear to be cut off from the browser viewport, and no matter how far you scroll up/down they do not become visible.

Any help would be greatly appreciated. Please let me know if I can provide anymore info for troubleshooting! Thanks very much (i’m a newbie)

Andrew

[ghosh]

@andrewheppner Hi Andrew, actually that is not an issue with react-modal or react for that matter. It’s CSS positioning.

Since the modal is absolutely positioned, it is out of the document bounds, in other words the document, does not know how big the modal is and has no idea that it is bigger than the document itself and therefore doesn’t scroll.

This can be fixed by giving the modal a fixed height and setting the overflow property to scroll. Try the code below, I just tested it and it works perfectly.

    var customStyles = {
      content : {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)',
        height: '500px', // <-- This sets the height
        overlfow: 'scroll' // <-- This tells the modal to scrol
      }
    };

[corysimmons]

This is more complicated than the above solutions.

• You have to have a fixed overlay that doesn’t scroll (body doesn’t scroll).
• Content needs to be scrollable.
• Content needs to be vertically and horizontally centered regardless of amount of content (1 word or 10,000 words).

/* _app.js -- I'm using Next.js and these class styles need to be global, alternatively you could injectGlobal() with Emotion/styled-components */

.ReactModalPortal {
  position: relative;
  z-index: 9999;
}

.ReactModal__Body--open {
  overflow: hidden;
}

.ReactModal__Overlay {
  display: flex;
  width: 100%;
  height: 100%;
  background: ${transparentize(.05, darken(.35, c.c))} !important;
  align-items: center;
  justify-content: center;
}

.ReactModal__Content {
  outline: none;

  > div {
    max-width: 70vw;
    max-height: 50vh;
    padding: 2rem;
    overflow: auto;
    border-radius: 1rem;
    background: white;
  }
}

// LoginModal.js

import ReactModal from 'react-modal'
import styled from '@emotion/styled'

ReactModal.setAppElement('#root');

const S = styled(ReactModal)`
  max-width: 200px; // Feel free to override this modal's specific styles

  .heading {
    color: red;
  }
`

const LoginModal = () => (
  <S isOpen={true}>
    <div>
      <h1 className="heading">Yeee</h1>
      <p>
        Lorem ipsum...
      </p>
    </div>
  </S>
)

export default LoginModal

It’d be nice if all this were built into react-modal’s default CSS with some centerAndScrollable prop defaulted to true.

🤷‍♀️