Search code examples
csshtmlquirks-mode

Can't fix modal height in Strict Mode, is Quirks Mode really that bad?

I'm a back-end dev working on an independent project, so please excuse any lack of knowledge that might follow. I'm using a free and open source admin-panel template called AdminLTE, and a bunch of modals as part of it. I've been working on it for a while now and everything was fine, except I didn't notice that a doctype wasn't declared. Using the standard and (as far as I know) heavily recommended html5 strict mode <!DOCTYPE html> all of my modals completely break and overflow their bounds.

Like I said, I'm a back-end developer and I just don't see the light at the end of this tunnel, so my question is: Is quirks mode really that bad? I've tested my page on latest Chrome, Mozilla as well as whatever Samsung uses on the latest Android and everything works fine and identically on all of them.

I'll attach my specific problem here however since that's against the rules, the main question here is whether quirks mode is still considered bad practice in 2016. I realize there's dozens of posts on this topic everywhere but none of them are very new and we've slowly surpassed Windows XP & old versions of IE, I feel like the arguments might differ.

Modal looks like this, admins-modal-contentdiv is filled using either jQuery's load() or html()if POST is needed.

<div class="modal fade" id="admins-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog c-modal-wrapper">
    <div class="modal-content bg-black" >
        <div id="admins-modal-content">
            <div class="c-modal-topbar">
                <h4>Admins</h4>
            </div>

            <div id="admins-modal-contentdiv" class="c-modal-content">

            </div>

            <div class="c-modal-bottombar">
                <a class="btn btn-app" onclick="$('#admins-modal').modal('toggle');">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
        </div>
    </div>
</div><!-- /.modal-dialog -->
</div><!-- /.modal  -->

Relevant CSS looks like this

.c-modal-wrapper{
    height:80%;
}

.c-modal-topbar{
    font-weight:bold;
    padding: 0px 0px 20px 0px;
    width:95%;
    margin-left:auto;
    margin-right:auto;

}

.c-modal-content{
    overflow-y:auto;
    height:65%;
    width:100%;
}

.c-modal-bottombar{

}

No DOCTYPE enter image description here

With <!DOCTYPE html> enter image description here

At this point I feel like giving up and just going with quirks mode, but since I want to rely on this template / modal usage style for future projects, I'd like to stick to standards so it doesn't end up broken eventually. I've invested hundreds of hours of work into this and I'm scared it's all going to waste.

If you have some free time and would like to have a look, you can check out an example page showing the issue HERE, just click on "Show Modal". An example of it working as expected, without any doctype declaration, is HERE. The pages are identical except for the doctype declaration, both include the same CSS and JS files.

Sorry again for breaking the rules, I have nowhere else to turn to. Thanks for reading.

Solution

  • Okay, so I've managed to fix my particular issue.

    What was happening is the modal's content was overflowing it's parent's set height. For some reason in Quirks Mode this height was respected. I'm still not sure what caused this to happen, however setting height:100% on all parents before the overflowing content (partially) fixed the issue.

    I removed the height from the parents in the first place to make the black background stretch only until the footer's end, however by forcing the 100% height, some extra empty space appeared under my footer, aka the c-modal-bottombar class. This is because I've not forced the footer to the bottom of the div in the first place. Even if I did, the result would've been ugly since the content won't stretch to fill the gap.

    If anyone finds themselves in a similar situation, well, you can't do it this way if you have variable sized headers/footers.

    The way I ended up making it look like I wanted is by redrawing the entire modal, like this.

    <div class="modal fade" id="admins-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog c-modal-wrapper">
        <div class="c-modal-topbar bg-black">
            <div class="c-modal-topbar-content">
                <h4>Admins</h4>
                To add a new admin, search for a player in 'Manage Players' and edit his rank.
            </div>
        </div>

        <div id="admins-modal-contentdiv" class="modal-content bg-black c-modal-content">
        </div>

        <div class="c-modal-bottombar bg-black">
            <a class="btn btn-app" onclick="$('#admins-modal').modal('toggle');">
                <i class="fa fa-arrow-left"></i> Back
            </a>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal needs to be above adminranks for stacking modals to work -->

    Some useless divs were removed, their classes merged into one

    .c-modal-wrapper{
    height:80%;
}

.c-modal-testing{
    height:100%;
}

.c-modal-topbar{
    width:100%;
}

.c-modal-topbar-content{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    font-weight:bold;
}

.c-modal-content{
    overflow-y:auto;
    height:65%;
    width:100%;
}

.c-modal-bottombar{

}

    Although it's unlikely, I hope this will help at least one other person, so the time of people who read this and the ones who answered isn't wasted.

    Thank you again for not downvoting me to oblivion(or locking my q).