React - Fullscreen Modal with Bootstrap

Question

I am using Modal component from bootstrap for React from here, I can easily achieve Modal using the following code,

import React, {Component} from 'react';
import {BaseComponent} from 'BaseComponent';
import { Modal, Button } from 'react-bootstrap';

class InteractiveMap extends BaseComponent {
  constructor(props) {
    super(props);
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    this.state = {showModal: false};
  }

  open() {
    this.setState({showModal: true});
  }

  close() {
    this.setState({showModal: false});
  }

  onFormSubmit(values){
    const data = {...values};

  }

  render() {

    return(
      <div>
        <div className="map-menuitem" onClick={this.open}>Interactive Map</div>
        <div>
          <Modal className="modal-container"
          show={this.state.showModal}
          onHide={this.close}
          animation={true}
          dialogClassName="custom-map-modal"
          >
            <Modal.Header closeButton>
              <Modal.Title>Interactive Map</Modal.Title>
            </Modal.Header>

            <Modal.Body>
              The body
            </Modal.Body>
            <Modal.Footer>
              <Button className="button-theme" onClick={this.close}>Close</Button>
              <Button className="button-theme button-theme-blue" type="submit">Save changes</Button>
            </Modal.Footer>

          </Modal>
        </div>
      </div>
    );
  }
}

export default InteractiveMap;

In the doc it is written that I can supply my custom css for the Modal, so I did dialogClassName="custom-map-modal" where

.custom-map-modal{
   width:100%;
}

The above don't work either.

I want to achieve full screen Modal here, how can I achieve using the above approach, or if any other approach there to do, but I want to use Bootstrap only.

Must have something to do with some other styling on your page. I was able to make the example modal you provided a fullscreen modal by adding `width: 100%; height: 100%; margin:0` and `height: 100%;` to `modal-content`. Start by looking at the modals parent and work your way up from there until you find which parent is preventing the width from being fullscreen. — Chase DeAnda, Jun 19 '17 at 21:33
@ChaseDeAnda Yes I am able to make it work by overriding the default `modal, modal-footer, modal-content, modal-dialog` css classes, but I end up overriding the modals for other pages which I don't want.. — iphonic, Jun 20 '17 at 03:51
Answer from Qi W worked for me from this thread https://stackoverflow.com/questions/32624634/specify-set-width-and-height-on-a-react-boostrap-modal/35970205#35970205. Just adding if someone stumbles on this thread. — Gunjan, Apr 09 '21 at 05:33

diegochavez · Accepted Answer · 2017-06-20T03:58:18.753

4

place the CSS class in the attribute "className" used by JSX to assign CSS attributes to the component.

take a look this example: https://www.webpackbin.com/bins/-Kn1AnYrAFxOONefi_4N

 <Modal className="modal-container custom-map-modal"
      show={this.state.showModal}
      onHide={this.toggleState}
      animation={true}
      >

SASS Implementation

.custom-map-modal {
   .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
 }
}

edited Jun 20 '17 at 03:58

answered Jun 20 '17 at 02:38

diegochavez

662
8
13

Thanks for the answer, but it doesn't seem to be working for me, it stills shows the default Modal.. though it is quite straight forward, anything else am I missing? – iphonic Jun 20 '17 at 03:48
Take a look the last update I miss some CSS on the example. Implementing this solution. https://stackoverflow.com/questions/18432394/how-to-make-twitter-bootstrap-modal-full-screen – diegochavez Jun 20 '17 at 03:59

React - Fullscreen Modal with Bootstrap

1 Answers1