Bootstrap example has default style props about react-modal

[manosim]

The same happened to me. Did you managed to fix this? Also there are 2 scrollbars when scrolling (one for the modal and one for the page). Any ideas?

[risonsimon]

anyone found a solution for this? I'm having this issue as well, having multiple scrollbars.

[hustlzp]

Remove this line did the trick:

https://github.com/reactjs/react-modal/blob/master/lib/components/ModalPortal.js#L187

[hustlzp]

Or less hacky way:

@jonaswindey @risonsimon @ekonstantinidis

<Modal className="Modal__Bootstrap modal-dialog"
    style={styles}>
</Modal>

const styles = {
    content: {
        position: null,
        top: null,
        left: null,
        right: null,
        bottom: null,
        border: null,
        background: null,
        overflow: null,
        WebkitOverflowScrolling: null,
        borderRadius: null,
        padding: null
    }
}

[sibelius]

👍

[sibelius]

@hustlzp this do not work when you have a navbar, do you know how to fix this?

[claydiffrient]

There hasn't been much traction on this issue in almost a year. I'm assuming that this is no longer an issue. If it is, please feel free to re-open.

[NewDimension]

This issue still exists. In the docs it's mentioned that className and/or overlayClassName need to be set so the respective components don't get passed default styles. Docs

In the example, they set className to "Modal__Bootstrap" which doesn't correspond to any defined style, but does the job of removing default style from the component. However, they don't set overlayClassName so the overlay gets the default style. We could set overlayClassName to "ReactModal__Overlay" but we still need to fix the CSS.

// component.js
      <Modal
          className="Modal__Bootstrap modal-dialog"
          overlayClassName="ReactModal__Overlay" // ADD THIS
           isOpen={this.state.modalIsOpen}
        >
         ...

// style.css

.ReactModal__Overlay {
  -webkit-perspective: 600;
  perspective: 600;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed; // ADD MISSING
  inset: 0px // ADD MISSING
}
...