Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-45380

adding custom header for Confluence space causing preview UI to break

XMLWordPrintable

      Steps to replicate :

      1. Install Confluence 6.0.1
      2. Login to Confluence
      3. Create a space
      4. Navigate to Space Tools >> Look and Feel >> Sidebar, header and footer
      5.  Add 'x' into the header field and click Save
      6.  Navigate back to the space home page and click edit
      7.  Click Preview

      Current result : The preview UI is broken as per the screenshot below :

      Expected result : The preview UI should be displayed properly.

      Workaround

      Adding to Global CSS ( > General Configuration > Stylesheet) can help 

      body.contenteditor #custom-content-header {display:none;}
body.contenteditor #custom-content-footer {display:none;}

        1. previewBreak.jpg
          previewBreak.jpg
          45 kB

            [CONFSERVER-45380] adding custom header for Confluence space causing preview UI to break

            Keimpe de Jong added a comment -

            Able to reproduce this issue on Confluence Server 7.19.3 with:

            Microsoft Edge Version 107.0.1418.26 (Official build) (64-bits) (Windows)

            Keimpe de Jong added a comment - Able to reproduce this issue on Confluence Server 7.19.3 with: Microsoft Edge Version 107.0.1418.26 (Official build) (64-bits) (Windows)

            Matthew Knatz added a comment -

            Version 7.4.8 affected, but adding 
             

            body.contenteditor #custom-content-header {display:none;}
body.contenteditor #custom-content-footer {display:none;}

             
            to global CSS continues to provide a workaround.

            Matthew Knatz added a comment - Version 7.4.8 affected, but adding    body.contenteditor #custom-content-header {display:none;} body.contenteditor #custom-content-footer {display:none;}   to global CSS continues to provide a workaround.

            Tobias Banzhaf added a comment -

            Version 7.4.4 is also affected

            Tobias Banzhaf added a comment - Version 7.4.4 is also affected

            Ellen Niles added a comment -

            Hey there,

            I see there has not been movement on this item since 2018. Though some bot activity perhaps says otherwise?

            Was wondering if it will be fixed sometime in the future.

            I found this item mentioned on this thread:
            https://community.atlassian.com/t5/Confluence-questions/Confluence-with-custom-header-breaks-edit-preview-on/qaq-p/114815

            If you are using Confluence Server and it is managed by an admin(meaning no access to CSS/HTML Macro due to security reasoning) there is no workaround for this and it is quite the unproductive situation for me to have to update a page 2-5 times for a sizing/formatting change because I can't see an accurate preview of how it will look on the page. 

            Any suggestions or response is appreciated.

            Thanks.

            Ellen Niles added a comment - Hey there, I see there has not been movement on this item since 2018. Though some bot activity perhaps says otherwise? Was wondering if it will be fixed sometime in the future. I found this item mentioned on this thread: https://community.atlassian.com/t5/Confluence-questions/Confluence-with-custom-header-breaks-edit-preview-on/qaq-p/114815 If you are using Confluence Server and it is managed by an admin (meaning no access to CSS/HTML Macro due to security reasoning) there is no workaround for this and it is quite the unproductive situation for me to have to update a page 2-5 times for a sizing/formatting change because I can't see an accurate preview of how it will look on the page.  Any suggestions or response is appreciated. Thanks.

            Fabrizio added a comment -

            Thanks for the workaround

            BTW also version 6.13.2 is affected  

            Fabrizio added a comment - Thanks for the workaround BTW also version 6.13.2 is affected  

            Sarah Elliott added a comment -

            The work-around above does the trick, but this is still an issue in DataCenter 6.14.3

            Sarah Elliott added a comment - The work-around above does the trick, but this is still an issue in DataCenter 6.14.3

            Thomas Schlegel added a comment -

            @JJ O'Brien - great workaround  - Thank you

            Thomas Schlegel added a comment - @JJ O'Brien - great workaround  - Thank you

            Adam added a comment -

            Thanks JJ, editing the global CSS worked perfectly.

            Adam added a comment - Thanks JJ, editing the global CSS worked perfectly.

            JJ O'Brien added a comment -

            Confluence CSS hides the sidebar in edit mode, but it appears the custom header and footer have been neglected.

            The following CSS code can be added to space or global CSS to handle this.

            Styling Confluence with CSS

            body.contenteditor #custom-content-header {display:none;}
body.contenteditor #custom-content-footer {display:none;}

            I have found a work-around for those who don't have access to the CSS overrides, but have the HTML Macro plugin. In The header/sidebar/footer add the following:

            Header:

            {html}<style>body.contenteditor #custom-content-header {display:none;}</style>{html}

            Footer:

            {html}<style>body.contenteditor #custom-content-footer {display:none;}</style>{html}

            JJ O'Brien added a comment - Confluence CSS hides the sidebar in edit mode, but it appears the custom header and footer have been neglected. The following CSS code can be added to space or global CSS to handle this. Styling Confluence with CSS body.contenteditor #custom-content-header {display:none;} body.contenteditor #custom-content-footer {display:none;} I have found a work-around for those who don't have access to the CSS overrides, but have the HTML Macro plugin . In The header/sidebar/footer add the following: Header: {html}<style>body.contenteditor #custom-content-header {display:none;}</style>{html} Footer: {html}<style>body.contenteditor #custom-content-footer {display:none;}</style>{html}

            Adam added a comment -

            And I just noticed that it does the same thing if you use a footer.

            I'm assuming a <div style="clear: float;"></div> would fix it, but haven't yet figured out how to add that to the header/footer section.

            Adam added a comment - And I just noticed that it does the same thing if you use a footer. I'm assuming a <div style="clear: float;"></div> would fix it, but haven't yet figured out how to add that to the header/footer section.

              Unassigned Unassigned
              dooi Der Lun
              Affected customers:
              39 This affects my team
              Watchers:
              33 Start watching this issue

                Created:
                Updated: