CODEWITHSUNDEEP
reactjsantd
Alan42
Alan42

Reputation: 339

How to displaying from the top of Modal after opened a Modal? (ant design)

I'm using antd in React.

There is a Modal, the content inside is very long (is a long ). After opening this Modal, the page will jump to the end of Modal. I want Modal to start display from the top after it pops up.

How to do that?

Upvotes: 2

Views: 4718

Answers (3)

Gianmarco Rengucci
Gianmarco Rengucci

Reputation: 86

You're probably getting focus'd on one of the footer's buttons. Antd has a way to remove focus (thus, setting your position at 0,0) for functional Modal, and that's autoFocusButton.

Modal.confirm({
  centered: true,
  bodyStyle: {overflowY: 'inherit', maxHeight: "90vh"},
  autoFocusButton: null,
  content: <ReactNode />,
});

The CSS styling in bodyStyle + centered is completely optional, but it could help you keep some padding outside the modal while still be able to scroll.

Upvotes: 1

casperw
casperw

Reputation: 320

I ran into the same issue. My hacky fix was to set a timeout that selected the div used by the modal and scroll that up.

Modal.confirm({
    content: <SomeReactComponent />,
});
// scroll it up, kinda hacky
setTimeout(() => document.getElementsByClassName('ant-modal-wrap')[0].scrollTo(0, 0), 100);

Upvotes: 1

Rohith Murali
Rohith Murali

Reputation: 5669

You can do it by scrolling the window to 0th position while you set the state value which sets the modal visibility to true like,

this.setState({showModal:true},()=>window.scrollTo(0, 0));

Upvotes: 1

Related Questions