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:

j1

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

j2

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.

Now in this script tag you can set “data-options” to enable changes that can made to the iFrame UI.

In below example, let us set data-options : sizeToParent:true
 j3
This will make your iFrame occupy the whole web page.
note: if it does not reflect the change the css’s “position” property as ‘fixed’. 

Similarly if you want custom width and height the set data-options as resize:true and remove sizeToParent:true

j4

and add the following script in your addon.js (Check ../js/addon.js)

j5

Also don’t forget to add the ac-content class in you .hbs or .html file as shown below:

j6


Check full documentation here

Hope it helps!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s