CODEWITHSUNDEEP
reactjsjsxantd
personwholikestocode
personwholikestocode

Reputation: 561

How to resize width of Ant Design modal based on different screen sizes?

I just want the max width of the modal to be 1200px and then 100% width if screen width is less than 1200px. Ive tried using style={{maxWidth: "1200px"}} but that doesn't work and there is no explanation of how to do this in the Ant Design docs. Any help is appreciated!

import React, { useState } from 'react';
import { Modal, Button } from 'antd';

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal 
      style={{maxWidth: "1200px"}} 
      title="Basic Modal" 
      visible={isModalVisible} 
      onOk={handleOk} 
      onCancel={handleCancel}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

ReactDOM.render(<App />, mountNode);

Upvotes: 0

Views: 3313

Answers (1)

Dae Hyeon Mun
Dae Hyeon Mun

Reputation: 536

Add this code and use maxModalSize value

const [maxModalSize, setMaxModalSize] = useState(1200);
const resize = () => {
    const maxSize = Math.min(1200, window.innerWidth);
    setMaxModalSize(maxSize);
};

useEffect(() => {
    window.addEventlistener("resize", resize);
    return () => window.removeEventlistener("resize", resize);
});

Upvotes: 1

Related Questions