CODEWITHSUNDEEP
javascriptreactjsantd
gameboynintendocolor
gameboynintendocolor

Reputation: 35

How to make header and footer of Modal fixed while allowing the Modal content alone to scroll?

I have been playing around with the Modal component 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 component fixed?

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

Check the button labeled scroll=Paper.

Upvotes: 2

Views: 9004

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53894

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 commodo cursus magna, vel scelerisque nisl consectetur et.`
          )
          .join('\n')}
      </Card>
    </Modal>
  );
}

enter image description here

Demo:

Edit Q-56727034-Modal-Paper

Upvotes: 6

Related Questions