sKopheK
sKopheK

Reputation: 173

Chrome Extension Popup is too high when first click

as I found out a few days ago when you click an extension button and popup shows up, its height is much higher than it needs to be if you need the height to be less than 350px. When something happens in the popup (animation e.g.) the height is adjusted properly according to the content. Setting height to html, body and general wrapper element didn't help. It might be some bug in the latest update of Chrome, I cannot test it in earlier builds, because of autoupdate.

I'll be thankful for any thoughts and advices.

Libor

UPDATE: I started to examine what can possibly cause this behaviour and found out this happens because of Twitter and Google Plus share buttons. They both modify DOM structure adding script tag which adds iframe. When commented, popup bubble appeared in correct size. The weird thing is facebook like button script does more or less the same, but it doesn't mess up the layout at all.

Upvotes: 3

Views: 1132

Answers (2)

Paul Fournel
Paul Fournel

Reputation: 11207

Like it was said here, the good solution to solve this problem is changing <html> to <!doctype html>

Upvotes: 4

azrafe7
azrafe7

Reputation: 2736

Same thing here with my extension and Chrome 19 on Windows 7. I must note that there were no problems with the previous version of Chrome. As you stated the issue shows up only on the first appearance of the popup - it shrinks correctly afterwards).

I'm using jQuery in my extension and I think I've partially solved it by adding

    $("body").fadeOut(10).fadeIn(50);

though it doesn't always work (it probably will if you increment the fadeIn delay but!). Hope someone can provide a better solution to this.

EDIT. This should be guaranteed to always work (using your hint) although the user might see the resizing happening for a fraction of second:

    $(window).load(function() { 
        $("body").fadeOut(10, function() { $(this).show(); }); 
    });

Upvotes: 1

Related Questions