Specify/Set width and height on a react-boostrap modal

Question

How can I apply a dynamic width and height to a react-bootstrap modal window? I have checked the react-bootstrap docs here but could not figure out how to do that. Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.

'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.

Here is my sample JSX code:

var MyWindow = React.createClass({
    getInitialState() {
        return { show: true };
    },
    close() {
        this.setState({ show: false });
    },
    open() {
        this.setState({ show: true });
    },
    save() {

    },
    render: function () {

        var Button = ReactBootstrap.Button,
            Modal = ReactBootstrap.Modal,
            ModalBody = ReactBootstrap.ModalBody,
            ModalHeader = ReactBootstrap.ModalHeader,
            ModalFooter = ReactBootstrap.ModalFooter,
            ModalTitle = ReactBootstrap.ModalTitle;

        return (
            <Modal show={this.state.show} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>My Cool Window</ModalTitle>
                </ModalHeader>
                <ModalBody>
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus</p>
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.close}>Cancel</Button>
                    <Button bsStyle="primary" onClick={this.save}>Save</Button>
                </ModalFooter>
            </Modal>
        );

    }
});

React.render(<MyWindow width={700} height={400} />, mountNode);

score 33 · Answer 1 · edited Apr 29 '18 at 11:04

33

According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.

So we might have my.jsx code below:

<Modal dialogClassName="my-modal">
</Modal>

With my.css below:

.my-modal {
    width: 90vw    /* Occupy the 90% of the screen width */
    max-width: 90vw;
}

Then you will have your custmized modal!

edited Apr 29 '18 at 11:04

snovelli

5,804
2
37
50

answered Mar 13 '16 at 12:24

Qi W.

706
9
21

But for that We have to statically define CSS in some CSS file, while in my case width/height will be dynamic via props. So it doesn't solves our problem. – Faisal Mq Mar 13 '16 at 12:40
Well, it's there any possible that we could use JQuery or something else to modify the class's(like `my-modal` here) style dynamically? – Qi W. Mar 14 '16 at 14:46
It can b done but it's an additional effort and React-Bootstrap devs should provide it themselves rather that we implementors pull our sleeves n go for some workaround ourselves. – Faisal Mq Mar 14 '16 at 15:29
1

@Stephen W - I'm finding that if I set width using the dialogClassName I need to use !important to override the BS modal-dialog style – Cathal Jan 25 '17 at 12:29
Pay attention that if for some modal block "max-width" was specified then the "width" will fits to the max-width value even if you set "!important". You must override the "max-width" value also if any. – Alex Oct 09 '17 at 10:21
7

This is only a partial answer, this is not the way to set the height. – shinzou Aug 23 '18 at 07:34
I tried adding a custom className using dialogClassName, but i am getting error saying React does not recognize the `dialogClassName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `dialogclassname` instead. If you accidentally passed it from a parent component, remove it from the DOM element. – sk215 Mar 10 '20 at 04:49
Per the comment left by @Cathal I too needed to specify `!important` – pooley1994 Jul 23 '21 at 16:29

Kshitij Dhyani · Answer 2 · 2022-03-14T07:15:02.920

The other mentioned solution only works for setting the width.

For editing the height, you need to add your custom css class to the contentClassName attribute.

For Example:

 <Modal contentClassName="modal-height"></Modal>

Css Class:

.modal-height {
  height: 70%;
}

For editing the width you need to add your custom css class to the dialogClassName attribute.

For Example:

 <Modal dialogClassName="modal-width"></Modal>

Css Class:

.modal-width {
  width: 70%;
}

Possible Issues:

Sometimes you will have to use !important to over-ride bootstrap imposed CSS, so experiment with that as well.

Credits: Found the solution here.

score 3 · Answer 3 · answered May 18 '22 at 14:51

3

.my-modal{ min-width: 50% }

Works for me!!!

answered May 18 '22 at 14:51

rubimbura brian

619
6
10

Specify/Set width and height on a react-boostrap modal

3 Answers3

Linked