React-Bootstrap Full screen Modal Dialog

Question

I am currently attempting to make the Modal component included with react-bootstrap to appear full screen.

I can see from the documentation that the individual components of the Dialog (Modal, Header, Footer, Body) accept custom classes through "bsClass", however once rendered the height is being restricted by another div with the class "modal-content", but cannot see a way of passing a custom class to this.

Is it possible to do this, or is there another way of achieving the same effect without manually changing the class once the dialog has rendered?

Answer 1

Yes, it's documented on their website but you can only change the base class the subcomponent such as Modal.header, Modal.footer doesn't add custom classes so you may have to face some difficulties to do it with CSS code, here is my modal code,

     <Modal
      {...this.props}
      show={this.state.show}
      onHide={this.hideModal}
      dialogClassName="custom-modal"
      bsClass="my-modal"
    >

With below CSS code I was able to make the bootstrap code full screen

@media (min-width: 992px)
.my-modal-lg {
    width: auto;
}

@media (min-width: 768px)
.my-modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
 }

@media (min-width: 768px)
.my-modal-content {
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    height: auto;
    min-height: 100%;
    border-radius: 0;
}

To get more control of your modal data, form, text i would suggest to have a look at the following GitHub react-bootstrap-modal repo

https://github.com/jquense/react-bootstrap-modal

and if you want to try anything except bootstrap modal, then you can also have a look at the react-modal by visiting below url,

https://github.com/reactjs/react-modal