Semantic-ui-react: Modal not centered and sit out of the screen

[omar-bz]

Hi, I dont know if this an issue but the modal examples are not working, a modal has a top margin -104px and not centered :
the code:

import React from 'react';
import { Button, Header, Image, Modal } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

const ModalModalExample = () => (
  <Modal trigger={<Button>Show Modal</Button>}>
    <Modal.Header>Select a Photo</Modal.Header>
    <Modal.Content image>
      <Image
        wrapped
        size="medium"
        src="/assets/images/avatar/large/rachel.png"
      />
      <Modal.Description>
        <Header>Default Profile Image</Header>
        <p>
          We've found the following gravatar image associated with your e-mail
          address.
        </p>
        <p>Is it okay to use this photo?</p>
      </Modal.Description>
    </Modal.Content>
  </Modal>
);

export default ModalModalExample;

the image:

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[siimots]

Duplicate #2549

[anztrax]

you can solve it with styling the Modal component.

style :

const inlineStyle = {
  modal : {
    marginTop: '0px !important',
    marginLeft: 'auto',
    marginRight: 'auto'
  }
};

react component :

<Modal dimmer={dimmer}
             open={open}
             onClose={this.handleOnClose}
             style={inlineStyle.modal}>

hope that can help temporarily 😅

[JohnPochta]

@anztrax , i LOVE U!
Thank you very much!

[loopmode]

@anztrax suggestion didn't center the modal vertically for me.

Apparently, it's just a .transition.visible {display: block!important} that's causing the troubles. I prefer this workaround for now:

.ui.page.modals.transition.visible {
    display: flex !important;
}

update: meh. Doesn't work when you have a max-height for the modal content.

[rztiwari]

I too had similar issues besides had to position the modal on the center vertically. I had made the changes above mentioned by @anztrax. Also added the override to modal as below:

.ui.modal {
margin-top: 0 !important;
}
Which allows the content to be place vertically centered with dynamic content as well