Semantic-ui: Modal is not centered and trunked at the top

[christophedebatz]

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.

[hammy2899]

Can you please recreate this and post a JSFiddle

[bukaOK]

you need to install last version of js, so I think in this case easiest way roll back semantic css version

[hammy2899]

This is probably related to this https://github.com/Semantic-Org/Semantic-UI/issues/6185, I have marked it as High Priority since a lot of people are reporting it.

[christophedebatz]

A small hotfix with css for thus interested...

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

[hammy2899]

I'm closing this as a duplicate.

[codeaid]

Same here. Updated and recompiled semantic-ui v2.3.1 but the problem still persists.

[moak]

Same problem here

[jeff3dx]

Still a problem in the latest version.

[gomezhyuuga]

Same problem here with npm package semantic-ui-css 2.3.1

[namezero]

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;
}

[ghost]

can not do it with inline style ?

[sumerbabel]

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

[nielsbot]

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

[jfajardo]

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%;
    }
}

[lazdinst]

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

[ellis]

@lazdinst Thanks for that tip - npm install [email protected] did the trick for me

[DornaHansen]

+1

[jlukic]

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.

[anztrax]

@lazdinst Thanks man, thats help me alot 👍

[CaioIbraim]

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

It works very well!!!

[replaysMike]

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

[ghost]

adding a .modal to my css worked for me:

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