'How to Enable Scroll Bar iside Ant Design Modal Component Body?

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

javascripthtmlreactjsmodal-dialogantd


Solution 1:[1]

A suggestion by using CSS

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

Solution 2:[2]

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>

Solution 3:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 LChuan
Solution 2 ogogorev
Solution 3 Juhil Somaiya

Related Questions