I'm using Ant Design's Modal ponent, and they don't seem to implement resizability into their modal. I would like to be able to manually resize the modal after it has been opened. Is there any way to do this?

I'm using Ant Design's Modal ponent, and they don't seem to implement resizability into their modal. I would like to be able to manually resize the modal after it has been opened. Is there any way to do this?

• javascript
• reactjs
• antd

• ant.design/docs/react/customize-theme You can add your own custom CSS for any ponent using less. – Mindaugas Nakrošis Commented Dec 10, 2018 at 20:39

3 Answers 3

So what I ended up doing for this was using react-resizable and creating a ResizableBox within the body of the modal. While not perfect right now, it's definitely something to get me going. Here's a codesandbox where I was doing some tinkering https://codesandbox.io/s/l9y9jrk4ym

The simple answer is: Yes,using ingenuity

import React, { useState, useEffect } from 'react'

const ModalView = () => {

    const [visible, setVisible] = useState(false);

    const getWindowDimensions = () => {
       const { innerWidth: width, innerHeight: height } = window
       return { width, height }
    }

    const useWindowDimensions = () => {
       const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())

       useEffect(() => {
          const handleResize = () => setWindowDimensions(getWindowDimensions())

          window.addEventListener('resize', handleResize)

          return () => window.removeEventListener('resize', handleResize)

        }, [])

        return windowDimensions
    }

    const { width } = useWindowDimensions();

    return (
      <Modal
          closable={true}
          centered
          style={{ width: (80 * width / 100), minWidth: (80 * width / 100) }}
          visible={visible}
          onCancel={() => setVisible(false)}
          footer={false}
      >
       /** your ponent **/
      </Modal>

    )
}

The simple answer is: No.

You can change the preset size in the theme, but not make it dynamically resizable.

Would be pretty tricky to implement on your own I would guess. It is probably simpler to pick another widget (not from Ant Design) which has this feature, such as https://www.npmjs./package/react-modal-resizable-draggable