How to center a Modal in Semantic-UI-React?

Question

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!

Clap

Possible duplicate of Best way to center a <div> on a page vertically and horizontally? – Vogue

Answer 1

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

Cesarcesare

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 ! – Photosynthesis

Answer 2

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

Lublin

Answer 3

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

Doretheadoretta