I am using Modal ponent 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.

I am using Modal ponent 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.

• javascript
• twitter-bootstrap
• reactjs
• modal-dialog
• bootstrap-modal

Share Improve this question Follow edited Oct 9, 2017 at 6:53 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Jun 19, 2017 at 18:50 iphoniciphonic 12.7k77 gold badges6666 silver badges111111 bronze badges 3

• 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 Commented Jun 19, 2017 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 Commented Jun 20, 2017 at 3:51
• Answer from Qi W worked for me from this thread stackoverflow./questions/32624634/…. Just adding if someone stumbles on this thread. – Gunjan Commented Apr 9, 2021 at 5:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

take a look this example: https://www.webpackbin./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;
 }
}