CODEWITHSUNDEEP
javascripthtmlreactjsmodal-dialogantd
Anonymous
Anonymous

Reputation: 91

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

Upvotes: 7

Views: 19282

Answers (3)

Juhil Somaiya
Juhil Somaiya

Reputation: 943

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>

Upvotes: 9

ogogorev
ogogorev

Reputation: 31

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>

Upvotes: 3

LChuan
LChuan

Reputation: 363

A suggestion by using CSS

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

Upvotes: 5

Related Questions