I have been playing around with the Modal ponent and I noticed that long content in a Modal window makes the whole modal body scroll instead of just the content inside the Modal.

Is there any way to make the content alone scroll while keeping the header and footer of the Modal ponent fixed?

I require something similar to how Material-UI Dialog ponent's Paper scroll works.

Check the button labeled scroll=Paper.

I have been playing around with the Modal ponent and I noticed that long content in a Modal window makes the whole modal body scroll instead of just the content inside the Modal.

Is there any way to make the content alone scroll while keeping the header and footer of the Modal ponent fixed?

I require something similar to how Material-UI Dialog ponent's Paper scroll works.

Check the button labeled scroll=Paper.

• javascript
• reactjs
• antd

1 Answer 1

There is no official way to do this, I believe because it's pretty trivial.

You need to define the Modal children scrollable, for example defining a Card with overflow and height.

<Card bordered={false} style={{ overflow: 'auto', height: '50vh' }}>

Material-UI Dialog doing just that behind the scenes.

function FixedModal() {
  return (
    <Modal visible={true} title={'Title'} footer={'Footer'}>
      <Card bordered={false} style={{ overflow: 'auto', height: '50vh' }}>
        {[...new Array(50)]
          .map(
            () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent modo cursus magna, vel scelerisque nisl consectetur et.`
          )
          .join('\n')}
      </Card>
    </Modal>
  );
}

Demo: