Help MyBB login modal appearing below board

[gelly 32]

When I go to use the login pop up box, for some reason, instead of the background dimming and the box appearing in the center of the screen, it scrolls down to the bottom of the board and appears on the left hand side. It's definitely something wonky with my theme (cause I checked it out on the default MyBB theme, and everything's working properly) but I can't figure it out!

 

https://menagerie.rpginit.com/index.php

[Kit the Human 758]

I was dealing with this exact same thing just yesterday! I'm on my phone right now so I can't double check that we have the same issues but for me the problem was the modal css.

 

Compare the default theme's modal css (global.css) to what's in your custom theme. If they're different, just copy and paste the default over.

 

Let me know if that wasn't it and I'll have a proper look when I'm on my computer.

@perry the platypus

[memoria 37]

I am not sure why but in comparing to the MyBB site, it looks like you're missing some styles for the blocker element which gets wrapped around the login modal via jQuery. On MyBB's site, these get applied in global.min.css, but these styles are neither in your global.css nor global.min.css. The modal window itself is also missing some styles. Relative position, inline-block, etc that are important to it's positioning. Here are the styles from the MyBB site:

 

.blocker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.75);
    text-align: center
}

.blocker:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em
}

.blocker.behind {
    background-color: transparent
}

.modal {
    width: 400px;
    text-align: left;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000
}

 

[gelly 32]

@Kit the Human So I copied and pasted the modal css from the default global.css, but the problem still persists.

[Morrigan 1,826]

@perry the platypus when I go to your site it's working as intended. Can you send me a screenshot of what you see?

[gelly 32]

@Morrigan Yeah, I saw that as well! For some reason, my skin wasn't updating whenever I'd make changes to it. I fixed that by reuploading it. Thank you so much, folks!

[Morrigan 1,826]

Good to hear @perry the platypus it was likely a caching issue. Glad it's all taken care of.