DEV Community

loading...

The right way to resize Reactstrap's Modal component.

itz_giddy profile image Audiophile ・4 min read

The Challenge

You're working with reactstrap (bootstrap + react), that good old trusty css library which lets you style your views with components as against the traditional classes. From the docs, you get an example like this:

import React, {useState} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';

const ModalExample = (props) => {
  const {
    buttonLabel,
    className
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;
Enter fullscreen mode Exit fullscreen mode

The example above works perfectly for most use cases, you can add the needed classes and style components as needed and boom! works like magic---until you have to resize the width and height of the modal, that is.

First attempt at resizing.

This is what I personally tried to do at first.

Step 1: Create a class with my custom width and height requirements in my stylesheet.

.custom-modal-style {
width: 897px;
height: 802px;
}

Enter fullscreen mode Exit fullscreen mode

Step 2: Add style to Modal component.

import React, {useState} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
import "./styles.css";

const ModalExample = (props) => {

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} className="custom-modal-style">
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          ...
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;
Enter fullscreen mode Exit fullscreen mode

But you'll notice with me that this doesn't work. Go ahead, try it(for width and height)...I'll wait.

Following my curiosity...

Upon further inspection with the Chrome dev tools, I realized that the Modal component rendered down to three nested tags:

image-of-chrome-dev-tools

The first 3 divs just before the div with a class of 'modal-header' show what the modal component renders down to. And then on further fiddling, I saw that the only way I could get the required change I was looking for was by adding my custom class to the div with the class of 'modal-content'.

This is not in reactstrap's docs, and there's no stated way of accessing that particular div tag.

So like every developer who wants to deliver fast, I went to stack-overflow to find hacks...long story short, they didn't work. So I did the next sane thing....

Diving into reactstrap's github repo.

On a brief perusal of the Modal component's props on Reactstrap's GitHub repo, this is what you see from lines 21-61:


const propTypes = {
  isOpen: PropTypes.bool,
  autoFocus: PropTypes.bool,
  centered: PropTypes.bool,
  scrollable: PropTypes.bool,
  size: PropTypes.string,
  toggle: PropTypes.func,
  keyboard: PropTypes.bool,
  role: PropTypes.string,
  labelledBy: PropTypes.string,
  backdrop: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.oneOf(['static'])
  ]),
  onEnter: PropTypes.func,
  onExit: PropTypes.func,
  onOpened: PropTypes.func,
  onClosed: PropTypes.func,
  children: PropTypes.node,
  className: PropTypes.string,
  wrapClassName: PropTypes.string,
  modalClassName: PropTypes.string,
  backdropClassName: PropTypes.string,
  contentClassName: PropTypes.string, //voila!!!!!! Got you!
  external: PropTypes.node,
  fade: PropTypes.bool,
  cssModule: PropTypes.object,
  zIndex: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  backdropTransition: FadePropTypes,
  modalTransition: FadePropTypes,
  innerRef: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
    PropTypes.func,
  ]),
  unmountOnClose: PropTypes.bool,
  returnFocusAfterClose: PropTypes.bool
};


Enter fullscreen mode Exit fullscreen mode

These are all the props that are to be passed to the Modal component. I won't go into details about the other props because that's not what you're here for.

I saw the contentClassName prop and thought "hey, this could work..", and work it did. So my code now looked like this:

import React, {useState} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
import "./styles.css";

const ModalExample = (props) => {

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} contentClassName="custom-modal-style">
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          ...
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;
Enter fullscreen mode Exit fullscreen mode

Now our Chrome dev tools look like this:

image-of-chrome-dev-tools

And I got the desired result!

To Summarize:

Just add contentClassName="your-custom-class" to the Modal component and you'll get your result!

Please share and like to save someone the stress!

Discussion (8)

Collapse
sirgalleto profile image
Sebastián Osorio

Love this post!

Collapse
itz_giddy profile image
Audiophile Author

Thank you! Glad you like it.

Collapse
tgoslee profile image
Trenisha Goslee

I literally have been struggling with this for two days! Thanks!

Collapse
itz_giddy profile image
Audiophile Author

You're welcome!

Collapse
serbiaguy96 profile image
Serbiaguy96

Thanks man! Helped me a lot :)

Collapse
pallavikamboj123 profile image
Pallavi kamboj

HY! thanks for this amazing editorial. One question:- I want to change the font-size of the react header. I tried using contentClassName but that's not working. Please help me with this

Collapse
rutu2k profile image
Collapse
orongee22 profile image
yerina ju

Thank you! You saved me!!

Forem Open with the Forem app