CODEWITHSUNDEEP
cssreactjsmodal-dialogantd
M_Z
M_Z

Reputation: 201

Use different sizes of antD Modal

I'm using antD modal to show an editor, the popup window should be fixed size to prevent size changing when collapsing/expanding sections inside.

So I customized:

.ant-modal-content {
max-height: 700px;
height: 700px;
width: 1000px;
/*overflow-y: auto;*/
/*overflow-x: auto;*/

}

but it's affecting other popups! I tried using style={{height: '700px', width: '1000px'}} of that specific modal but it didn't take affect.

How can I control the size of only one modal?

Sandbox: https://codesandbox.io/s/antd-reproduction-template-ci559?file=/index.css

(try to change the size o the syntax textarea as example for changing the size)

Upvotes: 3

Views: 27298

Answers (3)

Khizer Ali
Khizer Ali

Reputation: 9

You can pass directly width and height as props to Ant design modal like this

<Modal centered title="" footer={null} open={isModalOpen} onCancel={handleCancel} width={'360px'} height={'260px'}>

Upvotes: 0

Touseef Ahmad
Touseef Ahmad

Reputation: 1

You can fix and auto width of your antd modal with

<Modal title={} open={open} width={1000} width="auto" closable={false} footer={null}></Modal>

Upvotes: 0

Yousaf
Yousaf

Reputation: 29281

CSS styles defined in index.css file are global styles, meaning they affect every element/component in each file.

If you want to apply some styles on a specific element/component, you have 2 options:

  1. use CSS Modules. They allow you to restrict styles to specific component and reuse class names without worrying about name clashes or css styles affecting other components or element.

  2. As your popup window is a div element with a class named wrapper, apply the styles on wrapper class in RuleEditor.css file

     .wrapper {
   max-height: 400px;
 }

but keep in mind that if you use wrapper class somewhere else, these styles will affect those components/elements as well.

you also have to prevent textarea from resizing as well otherwise it will overflow. To do this, inside RuleEditor.js file, change the styles applied on TextArea component from

style={{ width: "100%", resize: "auto" }}

to

style={{ width: "100%", resize: "none" }}

Upvotes: 1

Related Questions