Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal


  • Give kudos
  • Received
  • Given


  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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

0 votes

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

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

342 views 23 8
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