Modal is not centered and trunked at the top

Hello,

I’m using semantic ui for react and I’ve a issue concerning the modal displaying.

When it opens, the modal appears at the top left corner of my screen and it’s not centered (vertically or horizontaly).

[Modal] should be center both horizontally and vertically

Version

“semantic-ui-css”: “^2.3.0”, “semantic-ui-react”: “^0.78.3”

The used code:

constructor() {
    super();
    this.state = { open: false };
    this.showLogin = this.showLogin.bind(this);
    this.closeLogin = this.closeLogin.bind(this);
  }
  showLogin(dimmer) {
    this.setState({ dimmer, open: true })
  }
  closeLogin() {
    this.setState({ open: false })
  }
 componentDidMount() {
    this.showLogin('blurring');
  }
  render() {
    const { open, dimmer } = this.state;
    return (
      <div>
        <Modal dimmer={dimmer} open={open} onClose={this.closeLogin}>
          <Modal.Header className="ui center aligned">Select a Photo</Modal.Header>
          <Modal.Content>
            <Modal.Description>
              <Header>Default Profile Image</Header>
              <p>Weve 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.Actions>
            <Button color='black' onClick={this.closeLogin}>
              Nope
            </Button>
            <Button positive icon='checkmark' labelPosition='right' content="Yep, that's me" onClick={this.closeLogin} />
          </Modal.Actions>
        </Modal>

      </div>
    );
  }

I’m posting here because you ask posting all css issues on the semantic ui repo and not on the react one.

[christophedebatz]

A small hotfix with css for thus interested…

.visible.transition {
  margin-top: auto !important;
  display: inline-block !important;
  position: relative;
  top: 20%;
}

[ellis]

@lazdinst Thanks for that tip - npm install semantic-ui-css@2.2.14 did the trick for me