react-bootstrap: Modal's dialogClassName prop not working

Question

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

Have you inspected the element and checked why it is not being applied?? May be you have other CSS rules which take more priority than this one.. — Rajshekar Reddy, Apr 07 '16 at 16:50
Thanks for the suggestion. It turns out the class for that tag is "main-modal modal-dialog". So "modal dialog" must be overriding it. That is the built-in react-bootstrap modal class. Any idea how to override it? — , Apr 07 '16 at 17:13
you can write inline CSS styles.. It will have more priority than the bootstrap rules.. Else you can specify the rule in your site.CSS by using a ID of your modal.. CSS rules with ID selectors have more priority.. Or you can add a custom class and write your CSS rule with all the possible class selectors. When the number of classes used in selectors are high it gets more priority... Use the one which suits the best for you — Rajshekar Reddy, Apr 07 '16 at 17:33
I tested these solutions: inline CSS: I wrote a modalStyle css object and set dialogClassName={modalStyle}. This didn't change anything. id: didn't work because dialogClassName is setting a class for some hidden dialog tag, not the Modal itself. many class selectors: I added 8 other class selectors to .main-modal, but this didn't change anything. Am I implementing your suggestions wrong? — , Apr 07 '16 at 19:22
Inline CSS means setting the style attribute of your element... Like this `stlye=width:90%;` — Rajshekar Reddy, Apr 08 '16 at 03:11

score 13 · Answer 1 · answered Nov 21 '19 at 21:12

13

Try

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

instead.

answered Nov 21 '19 at 21:12

Pablo Darde

5,844
10
37
55

score 0 · Answer 2 · answered Apr 07 '16 at 17:09

0

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.

answered Apr 07 '16 at 17:09

gyzerok

1,338
2
11
26

This solution requires me to redefine every css prop of the modal from scratch. According to the docs' example of dialogClassName, I should be able to simply redefine spec props, such as width. – Apr 07 '16 at 17:23
As you can see in Modal render (https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L168) this property is only passed to the Dialog which comes from dialogComponent property (https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L154). – gyzerok Apr 07 '16 at 17:28
I see your point. However, when I implement, I get a modal that has none of the css that is included in react-bootstrap Modal. So I would need to redefine everything, which is not desirable. Using dialogComponent is not a good substitute for dialogClassName. – Apr 07 '16 at 19:14
Sorry, it seems like the only solution with dialogClassName – gyzerok Apr 08 '16 at 07:40

score 0 · Answer 3 · answered May 13 '20 at 20:41

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!

score 0 · Answer 4 · answered Mar 20 '21 at 06:19

0

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.

answered Mar 20 '21 at 06:19

OptimusPrime

777
16
25

I was stuck for several hours and your solution was the only one that worked for me. Thank you so much! – Chen Jan 26 '22 at 02:59

mbobas · Answer 5 · 2022-02-01T19:36:48.097

0

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

edited Feb 01 '22 at 19:36

answered Feb 01 '22 at 19:21

mbobas

1
2

score 0 · Answer 6 · answered Jan 27 '23 at 11:49

0

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.

answered Jan 27 '23 at 11:49

Francisco Forte

1

react-bootstrap: Modal's dialogClassName prop not working

6 Answers6