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

user_12523952 0
Viewed 6617

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

antd reactjs modal-dialog html javascript
3 Answers

A suggestion by using CSS

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

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>
user_143510190

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>
user_93612890
Related