Semantic-UI: 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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 23 (4 by maintainers)

Commits related to this issue

Change the fix for displaying modal in the center. Using https://github.com/Semantic-Org/Semantic-UI/issues/6267#issuecomment-373156181 — committed to c0rv4x/project-black by c0rv4x 6 years ago

Most upvoted comments

A small hotfix with css for thus interested…

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

+33

christophedebatz on Mar 14, 2018

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

+10

ellis on Aug 3, 2018

I rolled back to version 2.2.14 and it fixed the issue without having to mess with CSS.
Please fix this issue.

lazdinst on Jul 17, 2018

adding a .modal to my css worked for me:

.modal { height:auto; top:auto; left:auto; bottom:auto; right:auto; }

ghost on Nov 14, 2019

to get fullscreen centered modal :

.ui.modal:not(.compact) { width: calc(100% - 50px) !important; margin-left: 25px !important; height: calc(100% - 50px) !important; margin-top: 25px !important; }

namezero on Jun 6, 2018

I fix it

@media only screen and (min-width: 992px){
    .ui.tiny.modal {
        position: fixed;
        top: 20%;
    }
}

@media only screen and (min-width: 768px){
    .ui.tiny.modal {
        position: fixed;
        top: 20%;
    }
}

@media only screen and (max-width: 767px){
    .ui.tiny.modal {
        position: fixed;
        top: 5%;
    }
}

jfajardo on Jun 25, 2018

This problem is incredibly annoying still in Semantic-Ui-React

replaysMike on Oct 24, 2019

Still a problem in the latest version.

jeff3dx on May 21, 2018

After try all hints, I fixed it making the following change on my css file:

It works very well!!!

CaioIbraim on Oct 2, 2019

add style: <div class="ui mini test modal confirm" style="position: fixed; top: 30%;">

sumerbabel on Jun 23, 2018

@lazdinst Thanks man, thats help me alot 👍

anztrax on Mar 1, 2019

Fixed in #6562, I’ve introduced a new setting to allow for non-flex positioning to be used in legacy browsers, or when detachable: false is used.

The funniness is around browsers that support flex, but do not apply flex rules to absolutely positioned elements. The PR should determine whether this is the case, and apply flex/non-flex positioning before the modal is shown.

jlukic on Sep 3, 2018

Found a really simple fix:

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

You may not need all the classes… but you need more than just .visible.active

nielsbot on Jun 23, 2018

Same problem here

moak on Apr 23, 2018