CSS to center the meeting details modal

[tempsaint]

The meeting details modal isn't centered when it pops up.

This css seems to work well. But when I try to add it to our Crouton custom css, it doesn't work because it only applies it to .modal-content and not #meeting_modal .modal-content.

#meeting_modal .modal-content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-height: 85vh;
    overflow-y: auto;
}

[tempsaint]

This is what I see when I use Inspector after adding that custom css.

[otrok7]

Hi, please add a screenshot of how the modal appears, and also details about which browser you are using. I have to recreate the problem before I can fix it...

[tempsaint]

The css pins it at 10% below the top of the window and 8% from the left edge of the window.

[otrok7]

That looks pretty good to me. You think it should be exactly centered?

[tempsaint]

Why not centered? It's not horrible, but I guess we felt it would be better if it was centered. I'd be fine if we could overwrite it with our own custom css. But why isn't that working? I put that exact custom css (as in my opening post) in the Crouton UI custom CSS section and when I inspect the css on the modal it's not taking effect. Even if I did !Important it's not working. It's like its not applying to the meeting_modal ID and only to the more general modal-content class, so it's getting cancelled out by the more specific ID css.

[otrok7]

Hmmm. When I put your code in the "Custom CSS" section of the crouton settings, the modal appears in the center. The reason why this modal has a different CSS is that I couldn't get this "centered" version to look right on IPhone SE. If we can get a different CSS that also looks OK on mobile, I can change it. But first, I want to find out why your custom CSS is being ignored. Send me a link to your crouton page.

[tempsaint]

You can try either https://ctna.org/find-a-meeting/meetings-tabbed/ or https://sandbox.ctna.org/find-a-meeting/meetings-tabbed/ (new staging site - different theme, etc.).

[otrok7]

The sandbox page has the css, and looks like the modal is centered. The first page has a lot of custom css, but I don't see #meeting_modal anywhere.

[dgershman]

@tempsaint did you ever resolve this?