Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Confluence Page Gadget macro: how to control height

Scott Wolfe
Contributor
August 29, 2019

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
Diego
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 30, 2019

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
TAGS
AUG Leaders

Atlassian Community Events