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

[Graham Campbell]

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?

[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]

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.

[Andrey Khaneev _StiltSoft_]

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

[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]

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;
}

[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

[Graham Campbell]

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?

[Stephen Sifers]

Hello Graham,

Thank you for the follow-up and the clarification of how the user macro should work along with a screenshot.

I am using Confluence 6.14 and am having trouble getting the user macro to expand like your screenshot. I have the snippets included within Confluence as your specified. is there something else that needs to be done? What version of Confluence are you testing against?

Regards,
Stephen Sifers

[Graham Campbell]

Hi Stephen, I'm using 6.13.3 at the moment.

The macro works for me exactly as provided.

Also, here is a JSFiddle: https://jsfiddle.net/k85awcmh/

Obviously the fiddle doesn't include the table filters, which is the main issue here.

Appreciate all the time you're spending on this.

[Stephen Sifers]

Hello Graham,

I re-attempted testing but had no luck. There is most definitely something within CSS that is causing interference if your user macro and the add-on.

Moving forward, we would suggest reaching out to Stiltsoft to have them better find what is causing their add-on to interfere with your user macro. Please ensure you send them a link to this post as they can review this during troubleshooting.

You may find Stiltsoft support at https://docs.stiltsoft.com/display/public/doc/Contact+Us.

When you find a solution from them, please do let us know what it is so others may learn from this.

Regards,
Stephen Sifers

[Graham Campbell]

Will do Stephen, and thanks again for all your time looking at this.

https://stiltsoft.customercase.com/forums/support-requests/ideas/171659-why-does-my-user-macro-cause-the-table-filter-html-to-change-its-layout