6

I am new to the Semantic-UI-React framework, and recently ran across a problem that I can't seem to fix. I have a Log in & Sign up Modal on my home page. When the LogIn And Sign Up button is triggered, the Modal pops up. However, I cannot get it to appear in the center of the page. It is on the top of the page, and partially cut off. How do I go about doing this? Thank you in advance for your help!

SentientCode
  • 71
  • 1
  • 2
  • Possible duplicate of [Best way to center a
    on a page vertically and horizontally?](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally)
     – Chase DeAnda Mar 20 '18 at 20:39

3 Answers3

9

The outer <div> containing the modal dialog has display: block; instead of flex which causes the misalignment. To be more specific, the definition display: flex of .dimmed.dimmable > .ui.visible.dimmer is for some reason overridden by display: block !important imposed by .visible.transition.

You might want to add the following to your CSS to fix this:

.dimmed.dimmable > .ui.modals.dimmer.visible {
  display: flex !important;
}

Or, if you are using css modules:

:global(.dimmed.dimmable > .ui.modals.dimmer.visible) {
  display: flex !important;
}
ewcz
  • 12,819
  • 1
  • 25
  • 47
  • For me I need `justify-content: center;` to make it centered. I use SUIR 0.88.0 and I use css modules. Your `:global()` really did help me, thanks ! – Michael Harley Sep 03 '19 at 15:34
9

I came across this issue when learning react just months ago and this is how I sorted this issue.In my .css file under App.js folder just add:

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

Hope it helps.Cheers

Johana
  • 121
  • 1
  • 2
1

There are currently issues with the modal's in SUI check out this issue https://github.com/Semantic-Org/Semantic-UI/issues/6185

Sean
  • 1,444
  • 1
  • 11
  • 21