nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Why does my user macro cause the table filter HTML to change its layout?

Graham Campbell_9crn1u

I have written a very simple user macro which mimics the effect of the Expand macro, but lets me style the clickable text as a heading in the H1 to H6 range.

I render it like this:

<div class="rs-expanding-heading-container">
<div class="rs-expanding-heading-control">
<$selectedStyle style="color: $selectedColor;" class="rs-expanding-heading">$paramTitle</$selectedStyle>
</div>
<div class="rs-expanding-content">$body</div>
</div>

Sometimes the body of the expanding heading macro contains a table, which always renders as expected.

However, it breaks when I attempt to apply the Table Filter plugin to that table.

If I apply the Table Filter in the editor and save the page, the table filter's CSS is as follows:

.tablefilter-outer-wrapper {

margin-top: 10px;

visibility: hidden;

}

If I disable the visibility style, I get the following broken mess and no table:

Furthermore, I've noticed that the underlying HTML for the Table Filter plugin is in a different order to when it appears in the regular Expand macro.

What could my User Macro possibly be doing that changes the underlying rendering order of other macros?

Accepted answers

All comments

Stephen Sifers

Hello Graham,

Thank you for providing detailed information into how your user macro functions and the adverse effects you’re seeing within the editor. While you did display soft of the styling used by the table filter and your user macro, we won’t be able to recreate this and find the issue without being able to use the user macro itself.

With this said, we would need to see the full user macro to create it within a test instance to find the overlap within the stylesheet that is causing issues with the table filter. Once we’re able to test we should be able to find where and why this is being caused. If you’re unable to share the user macro here, you could provide secure file share links instead of plain text sharing.

We look forward to your response and see what you’ve done with your user macro.

Regards,
Stephen Sifers

Graham Campbell_9crn1u

Hi Stephen, many thanks for coming back to me.

I'm more than happy to share my content here.

Macro definition

## Macro Name: rs_test_expanding_heading
## Visibility: Visible only to system administrators in the Macro Browser.
## Macro Title: RS Expanding Heading
## Description: Click a heading to expand the content to be read.
## Category: Confluence content
## Icon URL: 
## Documentation URL: 
## Macro Body Processing: No macro body

## Styles for this macro are contained in the confluence_global_stylesheet //confluence/Styles/confluence_global_stylesheet.css

###########
## Template definition follows
##
###########

## Created by : Graham Campbell
## Created on : 03/09/2018
## Updated on : 19/09/2018 - Removed the styles as it was causing batch.js to fault. Moved them into the global stylesheet.

## @param Title:title=Heading text|desc=The text to be used as the heading goes here.|type=string|required=true
## @param Style:title=Heading style|desc=The style of heading to use.|type=enum|required=true|enumValues=Heading 1,Heading 2,Heading 3,Heading 4,Heading 5,Heading 6
## @param Color:title=Color|desc=Choose a color for the heading text. Default is black.|type=enum|enumValues=Black,Blue,Green,Red,Yellow|default=Black

#set ($selectedStyle = "h" + $paramStyle.substring(8,9))

#set ($selectedColor = $paramColor)

#if (!$paramColor)
#set ($selectedColor = "black")
#end

<div class="rs-expanding-heading-container">
<div class="rs-expanding-heading-control">
<$selectedStyle style="color: $selectedColor;" class="rs-expanding-heading">$paramTitle</$selectedStyle>
</div>
<div class="rs-expanding-content">$body</div>
</div>

JavaScript (contained in Custom HTML)

/**
* Support for rs-expanding-heading macro
*
****/
$(".rs-expanding-content").each( function() {
var headingID = $(this).parent().find(".rs-expanding-heading").attr("id");
$(this).attr("id", headingID + "-rs-expanding-content");
});

$(".rs-expanding-heading").on("click", function (event){
event.stopPropagation();
event.stopImmediatePropagation();
$(this).toggleClass("rs-expanding-active");
$(this).parent().next(".rs-expanding-content").slideToggle("slow");
});

/**
* End of rs-expanding-heading macro support
*
****/

CSS (contained in Confluence Stylesheet)

.rs-expanding-content {
display:none;
margin-top: 20px;
}

.rs-expanding-heading::before {
content: "\25ba";
font-size: small;
display: inline-block;
vertical-align: middle;
color: #DFDFDF;
margin-right: 5px;
}

.rs-expanding-active::before {
content: "\25bc";
display: inline-block;
vertical-align: middle;
font-size: small;
color: #DFDFDF;
margin-right: 5px;
}

Andrey Khaneev _StiltSoft_

Hello @Graham Campbell

I've found out that tags <style> and <script> kill the user macro. But it works if CSS and javascript are added to the Custom HTML in Confluence Administration.

Graham Campbell_9crn1u

Hi Andrey, I should have been clearer in my response. The macro definition does not include any script or style information directly.

The entire definition is as I have included it in the Macro definition code block in my response.

The CSS is confined to the Confluence stylesheet.

The JavaScript is confined to the Custom HTML.

Stephen Sifers

Hello again Graham,

Thank you for providing your user macro along with the customization you have applied.

I added this macro and tested on Confluence 6.14 with PostgreSQL 9.5. I found I did not have an overlay issue with the macro attached to a page when adding a table filter. Here is a screenshot of what I see within my test:

Are there additional steps I am missing or content formatting that needs to be different?

We look forward to your response to find out why your user macro is causing a visual issue with other add-ons.

Regards,
Stephen Sifers

Andrey Khaneev _StiltSoft_

Hmm... It works fine in this case in my environment...

Graham Campbell_9crn1u

Thanks Stephen.

I just tested this by stripping my Custom HTML and Stylesheet right back to nothing but the bits I posted above, and it didn't improve anything.

When I expand the heading by clicking on it I continue to get the broken looking filters.

I note in your screenshot that the heading looks to be un-expanded/closed, based on the position of the arrow - an expanded heading should have a downward facing arrow.

Can you confirm that you placed the table inside the body of the macro, and that the macro you created has a 'Rendered' body type?

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-server

developer

macro

atl-adm

user-macro

table

css