How to change height and width of an iFrame in Atlassian-Connect-Express -JIRA Add-on? Solved!

JIRA Add-on’s are designed to add extra functionality into JIRA. JIRA provides a descriptor file through which you can create, configure and customize the UI elements in the JIRA.

Most of the UI elements like “general pages” are in the for an iframe whose height and width are set in the in-built css and javascript files within the Add-on which are not accessible.

To make changes in them Atlassian proivides Javascript API’s whcih you can check here for more details: Atlassian’s JavaScript API for JIRA Cloud platform

Let us come to the point, to change the dimensions of your iFrame, go to your atlassian connect express project’s path as : /views/layout.hbs

You will see the below script:

Now in this script tag you can set “data-options” to enable changes that can made to the iFrame as shown below:

The following options are currently supported:

Option	Values	Default	Description
`resize`	`true` or `false`	`true`	You can deactivate the automatic resizing by setting `resize=false`.
`sizeToParent`	`true` or `false`	false`	With `sizeToParent:true`, the iframe will take up its parent’s space (instead of being sized to its internal content).
`margin`	`true` or false`	`true`	If `true`, the `margin` option sets the body element’s top, right and left margin to 10px for dialogs, and to 0 for non-dialog pages.
`base`	`true` or `false`	`false`	With `base:true`, a base tag pointing to the host page is injected: . This can be useful for embedded links to product pages.