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:
- First, insert the Style Macro
- Then, insert the Confluence Page Gadget Macro
- Save the macro
- 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.
- Access the page we created earlier
- Bring up de Inspector (in Firefox, we can press F12)
- Find the <div> where the <iframe> for our Gadget macro is located
- in my case, the path for this <iframe> was this:
- <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"...>
- Take note of the name=*** attribute in the <iframe> with the gadget class
Now we go back to the Edit mode:
- Go to the Style Macro
- Type the following:
- iframe[name=*value-of-the-name-attribute*]{ height:*desiredheight*px; }
- swap *value-of-the-name-attribute* with the actual value of the name attribute
- swap *desiredheight* with the actual desired value
- Publish the page
- The Page gadget macro should now have the desired height
A few notes:
- The HTML structure can vary from page to page
- The name attribute will not be the same for all pages and macros
- The three dots I used in classes such as <div> mean that there are more attributes than the ones I wrote
- HTML elements nesting can be complex to navigate
- 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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.