CODEWITHSUNDEEP
javascripttwitter-bootstrapreactjsmodal-dialogbootstrap-modal
iphonic
iphonic

Reputation: 12719

React - Fullscreen Modal with Bootstrap

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.

Upvotes: 0

Views: 13918

Answers (1)

diegochavez
diegochavez

Reputation: 662

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

Upvotes: 4

Related Questions