AUI tabs do not render properly on Confluence pages

Still need help?

The Atlassian Community is here for you.

Ask the community

For Atlassian eyes only

This article is Not Validated and cannot be shared with customers.

Platform Notice: Server and Data Center Only - This article only applies to Atlassian products on the server and data center platforms.

Summary

The AUI tabs render as bullet points instead of horizontal navigation guidelines on Confluence versions above 7.0.

Environment

Confluence 7.0+

Diagnosis

  1. Navigate to your Confluence Administration » Manage Apps » Click Show All
    • Find Confluence HTML Macros
    • Enable just html-xhtml module
  2. On a Confluence page, insert an HTML macro
  3. Inside the macro, insert the code for the AUI tabs, like the following example:

    <div class="aui-tabs horizontal-tabs">
        <ul class="tabs-menu">
            <li class="menu-item active-tab">
                <a href="#Current">Current</a>
            </li>
            <li class="menu-item">
                <a href="#Complete">Complete</a>
            </li>
          <li class="menu-item">
                <a href="#Rejected">Rejected</a>
            </li>
        </ul>
        <div class="tabs-pane active-pane" id="Current">
            <p>test</p>
        </div>
        <div class="tabs-pane" id="Complete">
            <p>test</p>
        </p>
        </div>
          <div class="tabs-pane" id="Rejected">
            <p>test</p>
        </div>
    </div>
  4. Save the page.


Expected results:

Actual results:

Cause

According to AUI 8 upgrade guides and Preparing for Confluence 7.0, from Confluence 7.0, changes were made on AUI 8.3.5 and aui-tabs won't be loaded by default (super batch). These dependencies were used too much and remove from the super batch will increase performance, but AUI is still providing the resources and could be load by required.

Workaround

There are two possible workarounds:

  1. Install the free 3rd-party plugin HTML Elements since their source code request the necessaire web-resources.

  2. Add a Custom HTML, as follows:
    1. Go to  > General Configuration
    2. Find Custom HTML on the sidebar under the Look and Feel section
    3. Add these content to HEAD:

    <script type="text/javascript"> WRM.require('wr!com.atlassian.auiplugin:aui-tabs'); </script>
    • This will load this web-resource always, except now it will be asynchronous (WRM.require is) so there will be a flash of unstyled content (FOUC) before the CSS and JS for aui-tabs are loaded.
    4. Reload the page with the problem





Last modified on Sep 15, 2020

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.