React-modal: Issues with Modal scrolling/overflow sizing.

[andrewheppner]

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

[andrewheppner]

Thanks so much!
That did it.

Andrew

On Sun, Nov 15, 2015 at 12:43 PM, Indrashish Ghosh <[email protected]

wrote:

@andrewheppner https://github.com/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
  }
};

—
Reply to this email directly or view it on GitHub
https://github.com/rackt/react-modal/issues/102#issuecomment-156837646.

[Khushboopandit]

hey!
I tried overflow for scrolling my popup but it doesn't work for me.
can you suggest me something else?

[yuwei-liang]

What if I don't want to make the content scrollable, instead I would like to scroll the body to see the overflow content?

[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.

🤷‍♀️