'react-bootstrap: Modal's dialogClassName prop not working

I am using the dialogClassName prop to change the width of a Modal to 90%. The CSS doesn't change anything. I have verified that style.css works fine for all other classes.

The solution at this SO question doesn't work. The documentation doesn't work either.

I appreciate your help!

The render method of modal.js:

render(){
    return (
        <div>
            <CardMain openModal={this.handleOpen}
                                {...this.props} />
            <Modal show={this.state.open}
                   onHide={this.handleClose}
                   dialogClassName="main-modal">
                <ModalMain tabKey={this.state.tabKey}
                                  {...this.props} />
                <FeedbackForm />
            </Modal>
        </div>
    );
}

style.css:

.main-modal {
    width: 90%;
}
cssreactjsreact-bootstrap


Solution 1:[1]

Try

.main-modal {
    min-width: 90%;
}

instead.

Solution 2:[2]

According to source code dialogClassName is used to set up className for the dialog component. You can pass dialogComponent property to the Modal component.

You can read description of dialogComponent in the next row to dialogComponentClass in the Modal docs.

Solution 3:[3]

It looks like that BS automatically defines their class for the Modal.Dialog component as .modal-dialog. Accessing that through CSS chaining worked for me, without having to redefine all of BS' standard CSS attributes:

Define an id for the <Modal> tag, e.g. <Modal id="main-modal">

Then define the CSS anchor tag as #main-modal .modal-dialog {width: 90%;}

I hope that helps!

Solution 4:[4]

I ran into the same problem and found that this works.

My css:

.modal-80w {
  min-width:80%;
}

JSX:

  <div className="modal-80w">
    <Modal
      show={props.show}
      onHide={resetRatingsAndToggle}
      dialogClassName="modal-80w"
      >

    <!--MODAL CONTENT HERE -->

    </Modal>
  </div>

It seems to need the className for the wrapping DIV as well as the dialogClassName both set to the class selector defined in your css file.

Solution 5:[5]

I used a styled-components to resolve it. Declaration of a new ModalStyled:

export const ModalStyled = styled(Modal)`
background-color: #555555;
color: #555555;
`;

Use it in Your Code:

<ModalStyled 
    {...props}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >

It's working :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pablo Darde
Solution 2 gyzerok
Solution 3 Malcolm Burtenshaw
Solution 4 OptimusPrime
Solution 5

Related Questions