Lastpass bar with an iframe breaks my css

Question

I have two buttons are set position equal to "absolute", when the LastPass addon's bar dipslays, they displays wrong because LastPass had inserted an iframe to my webpage:

LastPass iFrame

    <iframe id="lpiframe74158812" src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/overlay.html?&amp;add=1" scrolling="no" 
    style="height: 27px; width: 1263px; border: 0px;"></iframe>

The CSS:

    .button-bar {
    width: 175px;
    float: left;
    top: 113px;
    text-align: right;
    right: 20px;
    position: absolute;
    }

Image: https://i.stack.imgur.com/Rq5Z5.png

How can I avoid this case? Thanks so much!

It relates to LastPass addon's bar. So I think jsfiddle can not help in this case. — EnvySky, Jul 03 '15 at 02:03

score 4 · Answer 1 · answered Aug 31 '15 at 21:31

I had this same issue and I found that last pass editing the DOM of my webpage! LastPass had added a div right after the body tag of my page.

<div id="lptopspacer48468746" style="height: 27px;"></div>

It looks like the div id is random, so I can't strip it out. I think this problem is with lastPass. I don't think there is a way to truly fix it.

score 0 · Answer 2 · answered Sep 01 '16 at 13:25

Also annoyed by this <div id="lptopspacer[0-9]+" style="height:40px"></div> inserted in any page monitored by firefox lastPass plugin (after the site has shown a login form), I've come up with a jQuery solution.

Only adding some CSS rules don't seems to works as the div is obviously added after page load by a script. Changing style or trying to remove the div just after page load doesn't works either.

So this snippet run a delayed function to hide the div when found, or stop running after 5 attempts if no lastPass plugin is affecting the document.

<script>
    var log = function(msg) {
        if (console && console.log){
            console.log(msg)
        }
    };
    $(document).ready(function(){
        var maxTry = 5, lptopHideTimeout;
        var clearLptop = function(delay) {
            var $lptop = $("div[id^='lptopspacer']");
            if (lptopHideTimeout) {
                window.clearTimeout(lptopHideTimeout);
            }
            if ($lptop.length && $lptop.is(':visible')) {
                log("** Hiding lastPass lptopspacer...");
                $lptop.css( "display","none" );
            }
            else {
                maxTry -= 1;
                if (maxTry > 0) {
                    log("## No lastPass lptopspacer div found yet. Retrying in " + (delay/1000) + ' second...');
                    lptopHideTimeout = window.setTimeout(function(){
                        clearLptop(delay);
                    },delay);
                }
                else {
                    log("## Giving up after too much attempts.");
                }
            }
        };

        clearLptop(500);
    });

</script>

score 0 · Answer 3 · answered Dec 09 '16 at 07:47

Better late than never if others also are having this problem. I had it to, that Lp spacer, in my case it was generated because I had Mcafee safekey installed on the computer. It showed up with a notice on every pageload on my website and caused an lp spacer that broke my site with a white bar on top.

Uninstalling Mcafee safekey solved it for me.

Lastpass bar with an iframe breaks my css

3 Answers3