CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Masiar
Masiar

Reputation: 21352

Chrome Extension page popup.html doesn't resize

So I have this Chrome Extension that loads some content off the internet. Basically the user clicks on the popup icon, then some JavaScript in the background page loads some page, parse an image from it and puts it into the popup.html page. The problem is that the popup.html is not resizing to fit the actual size of the content. I saw a couple of similar questions here on StackOverflow, each one answered with "put <!DOCTYPE html> on top of your popup.html page" which in my case is not working. The size of the popup remains very small (about 1cm square).

Previously I had some CSS style that fixed the width & height but I noticed my content is not always the same size, so I would like the popup.html page to automatically resize itself to fit the content.

I know that in the very worst case I could parse width and height of the image and set it as CSS but I feel like there is a more elegant solution.

Thanks

Upvotes: 4

Views: 3004

Answers (2)

Ricky Raykhenberg
Ricky Raykhenberg

Reputation: 41

I was able to dynamically resize the popup with a little bit of jQuery.

$('html').height($('#menu').height());

Where #menu is just a div that wraps all of the content. body didn't properly resize, so I couldn't use that.

Apparently just changing the height of html is enough.

Upvotes: 4

Masiar
Masiar

Reputation: 21352

I managed to solve the problem. So apparently if I load a content into popup.html the popup won't resize automatically. There is no way it will. So I tried to modify the CSS of the page after loading the content to display, but also this wasn't working. Then I found out that there should be no hidden content in the page when dynamically resizing it. When I loaded the content from the web, I hid the whole page in an hidden div, then through JavaScript I accessed the element of the page that I was interested in, grabbed it and put into a visible container in the popup page. To solve the issue I just had to "delete" through document.getElementById('myHiddenDiv').innerHTML = "" the content of the hidden div and magically the popup resized :-).

Upvotes: 3

Related Questions