Positioning footer

Question

Due to my footer HTML tag switching places, I'm having trouble positioning it. As you can see in my IDE I've set my footer to be at the most bottom inside the HTML section. However, once I run my app, it changes position by going 2 lines up.

Is it because of the remodal-pop box configuration? Any idea how to fix this? Here is the image, to make it more understandable.

Here is my css-footer code:

.footer {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
     padding: 1rem;
     text-align: center;
     background: #2E3438;
     color:white;
     height: 23px;
     line-height: 8px;
     font-size: 13px;         
}

and html and body which I can NOT change due to a remodal-pop bug:Twitter Bootstrap modal pushes html content to the left

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

EDIT (after the given answer): this is the code which you need to change (append to prepend) the name of the file is jquery.remodal.js:

if (!remodal.$overlay.length) {
      remodal.$overlay = $('<div>').addClass(namespace + '-overlay');
      remodal.$body.prepend(remodal.$overlay);
    }

    remodal.$bg = $('.' + namespace + '-bg');
    remodal.$closeButton = $('<a href="#"></a>').addClass(namespace + '-close');
    remodal.$wrapper = $('<div>').addClass(namespace + '-wrapper');
    remodal.$modal = $modal;
    remodal.$modal.addClass(namespace);
    remodal.$modal.css('visibility', 'visible');

    remodal.$modal.prepend(remodal.$closeButton);
    remodal.$wrapper.prepend(remodal.$modal);
    remodal.$body.prepend(remodal.$wrapper);

if the **.remodal-overlay** and **.remodal-wrapper** were generated. they will always appear in the bottom unless you try to make a **div** above the **.footer** and set the **remodal-overlay** and **remodal-wrapper** generate only inside the **div** that you made — Abbr, Apr 11 '16 at 10:34
Since HTML5, we use the `footer` tag. I invite you to look at it. — Seblor, Apr 11 '16 at 10:46
@MarkSoliver this is what I thought so, tnx for the suggestion div! — EugenSunic, Apr 11 '16 at 10:48
@none That was a comment... Not an answer... Anyway, have you tried in a different browser ? — Seblor, Apr 11 '16 at 10:49
@MarkSoliver I've tried mutliple options and it doesn't work, also tried your dive suggestion. I' m also starting a bounty... — EugenSunic, Apr 18 '16 at 19:39
@none use jsfiddle or codepen it is better suited.And have you tried using !important ? — codefreaK, Apr 18 '16 at 19:59

score 4 · Accepted Answer · answered Apr 18 '16 at 19:50

4

Your remodal js script just appends those div-s on document ready.

Both of them, as I can see at remodal home page are position: fixed so as long as you did not changed styling of those remodal containers - they couldn't shift your absolutely postioned footer.

Probably problem lies elsewhere. You can modify remodal script and prepend (or place elsewhere) those containers but I don't think that would matter.

Maybe there is problem with one of remodal styles? You could remove styles from DOM for test (leaving only js).

answered Apr 18 '16 at 19:50

Przemysław Melnarowicz

1,057
7
20

hah, I don't believe it after chaging all the relevant appends it works now!! Tnx man, well deserved +100. .prepends works perfeclty. I have to wait 23 hours to award you... – EugenSunic Apr 18 '16 at 20:18
1

btw. @none - can you post exactly which `append` should be changed? I think it would help others. – Przemysław Melnarowicz Apr 20 '16 at 17:36

Positioning footer

1 Answers1