Theming your gadget dynamically

This page is part of the Gadget Developers' JavaScript Cookbook.

How do I dynamically theme my gadget?

It is possible to have the theme dynamically adapt to the space available with some JavaScript like this:

1
2
action: ...
theme : function () {
  if (gadgets.window.getViewportDimensions().width < 500){
    return "top-label";
  } else{
    return "long-label";
  }
}(),
fields: ...

Gadget Developers' JavaScript Cookbook
Using the Atlassian Gadgets JavaScript Framework