I am having a modal with long content. I need to have an internal scroll bar inside the modal but there is no information about that in the documentation

 <Modal
        title={<Typography style={{color:'#2e186a'}}>FAQ</Typography>}
        centered
        visible={openFaq}
        onOk={() => setopenFaq(false)}
        onCancel={() => setopenFaq(false)}
        width={1000}
        footer={false}
        
      >
       {Content}
      </Modal>  

Any help is welcome.Thanks

I am having a modal with long content. I need to have an internal scroll bar inside the modal but there is no information about that in the documentation

 <Modal
        title={<Typography style={{color:'#2e186a'}}>FAQ</Typography>}
        centered
        visible={openFaq}
        onOk={() => setopenFaq(false)}
        onCancel={() => setopenFaq(false)}
        width={1000}
        footer={false}
        
      >
       {Content}
      </Modal>  

Any help is welcome.Thanks

• javascript
• html
• reactjs
• modal-dialog
• antd

3 Answers 3

You need to provide the maxHeight option inside bodyStyle prop along with overFlow set to auto

<Modal
   bodyStyle={{ overflowY: 'auto', maxHeight: 'calc(100vh - 200px)' }}
>
{content}
</Modal>

A suggestion by using CSS

<Modal
  bodyStyle={{overflowX: 'scroll'}}
>
  {Content}
</Modal>

You can achieve this as following:

• Modify .ant-modal-content class

.ant-modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

• Add fixed height and overflowY: scroll to the Modal

<Modal
  style={{ height: 'calc(100vh - 200px)' }}
  bodyStyle={{ overflowY: 'scroll' }}
>
  Your content
</Modal>