CODEWITHSUNDEEP
csspopupfirefox-addonfirefox-addon-sdk
Seph Reed
Seph Reed

Reputation: 11018

How do I size a Firefox Add-on SDK popup/panel? Firefox Add-on SDK popup/panel too small

I followed the tutorial on creating a popup for an add-on in Firefox, and it worked great.

The issue I'm having now is that the popup it creates doesn't change size to fit the content I add to it. Instead, it adds scroll bars.

So, how do I change the size of a Firefox Add-on SDK popup to show all content?

Upvotes: 0

Views: 161

Answers (2)

Seph Reed
Seph Reed

Reputation: 11018

Though the tutorial and docs never say it, the height and width of a panel always defaults to the same small size.

To change it you can use the height and width parameters for the panel class.

If you want it to change automatically you can use this code:

//index.js
var panel = require("sdk/panel").Panel({
    height: 200,  //choose your default
    width: 200,
    contentURL: data.url("popup.html"),
    contentScriptFile: data.url("auto_resize_popup.js")
});

panel.port.on("resize", function (size) {
    console.log(size);
    panel.resize(size.width, size.height);
});

...

//auto_resize_popup.js

    var content = document.body;
    var size = {};
    size.width = content.offsetWidth + 2;  //2 extra pixels get rid of scroll bars
    size.height = content.offsetHeight + 2;
    self.port.emit("resize", size);

Upvotes: 1

humanoid
humanoid

Reputation: 764

You do have to deal with that yourself.

If you already know the desired size when creating the panel, you can pass the height and width as properties of the object to the Panel() constructor.

After a panel is created, its size can be changed by setting the height and width properties on it.

height and width values are numbers in pixels.

See https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel for a full documentation of how to use panels.

Upvotes: 1

Related Questions