It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Confluence Page Gadget macro: how to control height

Is there some way to increase/control the height of the image/panel displayed when using the "Confluence Page Gadget" macro?  There is a field to set the width, but even when using Auto, the vertical height is so short that hardly any data is visible.

1 answer

Hello there!

So, Scott, we can change the height of our Page Gadget Macro. However, the method is not native to the macro and involves a bit of CSS and the Style macro. 

Let us get this solved:

  1. First, insert the Style Macro
  2. Then, insert the Confluence Page Gadget Macro 
  3. Save the macro 
  4. Publish the page

After the above is done, comes the unsupported part of the procedure. We will need the page inspector of our browser for this step. The inspector is activated with F12 in Firefox. We are looking for the <iframe> in which our gadget is located. This will differ from page to page.  

The following steps are meant as guidelines on how to find this <iframe>. Each page can have other structures than the one I presented.

  1. Access the page we created earlier
  2. Bring up de Inspector (in Firefox, we can press F12)
  3. Find the <div> where the <iframe> for our Gadget macro is located
    1. in my case, the path for this <iframe> was this:
    2. <body id="com-atlassian-confluence"...> -> <div id="page"> -> <div id="full-height-container"> -> <div id="main"class="aui-page-panel"> -> <div id="content"class="page view"> -> <div id="main-content" class="wiki-content"> -> <div class="gadgetContainer-21361019977728 conf-macro output-block"...> -> <iframe id="gadget-21361019977728" class="gadget" name="gadget-21361019977728"...> 
  4. Take note of the name=*** attribute in the <iframe> with the gadget class


Now we go back to the Edit mode:

  1. Go to the Style Macro
  2. Type the following:
    1. iframe[name=*value-of-the-name-attribute*]{ height:*desiredheight*px; }
    2. swap *value-of-the-name-attribute* with the actual value of the name attribute
    3. swap *desiredheight* with the actual desired value
  3. Publish the page
  4. The Page gadget macro should now have the desired height

A few notes:

  1. The HTML structure can vary from page to page
  2. The name attribute will not be the same for all pages and macros
  3. The three dots I used in classes such as <div> mean that there are more attributes than the ones I wrote
  4. HTML elements nesting can be complex to navigate
  5. Here are some screenshots of how my page looks like after the customisation:


Hey Scott, let us know if this helps you out. Looking forward to your findings. 

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Confluence

How is your team having fun and bonding, remotely, utilizing Confluence?

Thanks everyone for answering last week’s question. The winner of the random drawing from those who commented is: @LarryBrock I’ll contact you separately with your prize details. This wee...

269 views 9 6
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you