Custom HTML Banner in Confluence Server making causing [Update] button (div) to be hidden

[Darryl Lee]

Hi - Confluence Server 7.13.0. I've been inserting announcement banners on the site just like always: How to add a site-wide banner 

Users noticed something odd last time around. When editing a page, the div for the banner appears to be causing the div for "savebar-container" (which contains the [Update] and [Close] buttons) to not show up.

Scrolling down with a mouse or touchpad can make it appear, but it's an annoyance.

Any ideas? I did try adding extra height to a custom footer but that didn't seem to help.

I'm thinking there's some CSS fix for this, but it's certainly beyond me.

[Rilwan Ahmed · Accepted solution]

@Darryl Lee ,

Please try this

Custom HTML  --> At beginning of the BODY


<div class="aui-message warning" style="text-align:center">
Your Message Here
</div>

[Darryl Lee]

Thanks yes as I mentioned below, 

Barbara @ Atlassian Support figured out that I had my banner in the wrong place "At the end of the HEAD" instead of "At beginning of the BODY".

Once I moved my banner to the right place (which is where the documentation says to put it. DOH!), it worked just fine!

[Darryl Lee]

Barbara @ Atlassian Support figured it out for me! 

I had my banner in the wrong place "At the end of the HEAD" instead of "At beginning of the BODY".

They figured that out without me telling them I had it in the wrong place. Amazing!

Once I moved my banner to the right place (which is where the documentation says to put it. DOH!), it worked just fine!

[Rilwan Ahmed]

@Darryl Lee 

I had given my suggestion. Seems you did not see it in my earlier comment. 

[Darryl Lee]

Ah yes didn't see that. Thanks. 

[Bill Bailey]

If you are using what was suggested in the article:

<div class="aui-message closeable">

I would suggest adding a custom class to the div tag to allow you to control the format that way. You may have a conflict between your styling and the default aui-message.

I also suggest NOT using inline sytling, but adding the code to your site's CSS.

[Pramodh M]

Hi @Darryl Lee 

How about we use announcement banner in MARKDOWN Format?

Or format the announcement banner as given in the doc below

https://confluence.atlassian.com/confkb/how-to-add-a-site-wide-banner-165609599.html

They have also mentioned in the note about scrolling down to see the footer!!

Let me know what you think about it?

Thanks,

Pramodh

[Darryl Lee]

Heh, no Markdown does not work for Banners.

[Pramodh M]

Oops My bad, but I did a testing on the version exact to your version and I did not get any error

Try adding it to the body

<!-- Message Banner -->
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
Your important message...
</div>

Thanks

[Darryl Lee]

Hi thanks @Pram - can you watch my video below:

https://photos.app.goo.gl/LtCqMHPbfBYMG2nA6

If you edit an existing page with enough content that you need to scroll through it, does the "Savebar" stay pinned at the bottom of the window?

[Fabian Lim]

Hi @Darryl Lee

Can you share your banner with the formatting to see if we can reproduce it?

Cheers

[Darryl Lee]

Oooh, good idea. Here was my banner:

<!-- Message Banner -->
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
CONFLUENCE STAGING
</div>
<style type="text/css">
#com-atlassian-confluence #main {
padding-bottom: 200px;
}
</style>

So that's pretty much straight out of the the Atlassian docs with the addition about footer size.

I wonder if it might be browser-specific. I'm seeing it in the Chrome variant Brave, and I believe my users were also using Chrome.

[Darryl Lee]

Here's what a Create Page looks like with the banner above vs without, before I touch the mouse to scroll.

WITH:

WITHOUT:

[Fabian Lim]

Hi @Darryl Lee

Not sure what you are trying to accomplish with the footer padding. I don't think it belongs in the announcement banner.

We use the following and we have no issues in our banner and looks cleaner.

<div class="aui-message warning">
<p class="title">
<span class="aui-icon icon-warning"></span>
<strong>Jira Maintenance:</strong> We are currently running performance tests. DO NOT Change any configurations!.
</div>

[Darryl Lee]

Ah, that's a nice styling, thanks. The footer padding was an attempt to try to address the issue where the savebar doesn't show up unless you scroll the mouse, and when editing a page with a lot of content, sometimes you have to scroll multiple times to somehow force it to load.

Is your banner on Confluence? It mentions Jira.

If you edit a page when you have a banner in Confluence, do you see the savebar at the bottom, without scrolling?

This is especially an issue with pages with a lot of content. Without a banner, that savebar stays at the bottom of the window, always visible.

When the banner is set, the savebar only shows up when you scroll all the way to the bottom of the editing window.

I will try to record a video to demonstrate.

[Darryl Lee]

Here's a quick video I took demonstrating the issue. I think the right terminology is that the Savebar is usually "pinned" to the bottom of the window (as a "fixed footer"), and the banner div is somehow breaking that.

https://photos.app.goo.gl/LtCqMHPbfBYMG2nA6