CODEWITHSUNDEEP
cssreactjsreact-bootstrap
user5791460
user5791460

Reputation:

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

Upvotes: 8

Views: 8531

Answers (6)

Francisco Forte
Francisco Forte

Reputation: 1

Just add !important to your css _> it will overwrite the react-bootstrap css

.modal-90w{
    width: 90vw !important; 
    max-width: 90vw !important;
}

This is my dialogClassName _> I defined it in an css file and imported in JS.

Upvotes: 0

mbobas
mbobas

Reputation: 1

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 :)

Upvotes: 0

OptimusPrime
OptimusPrime

Reputation: 859

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.

Upvotes: 0

Malcolm Burtenshaw
Malcolm Burtenshaw

Reputation: 23

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!

Upvotes: 0

Pablo Darde
Pablo Darde

Reputation: 6432

Try

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

instead.

Upvotes: 12

gyzerok
gyzerok

Reputation: 1428

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.

Upvotes: 0

Related Questions