Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Issue with tabpane component



Below are the issues observed with tabpane component although these do not cause any functionality issues:
  • Evaluation of the attribute, "adjustHeightToElement" in the doResize method of tabpane.js is incorrect. In the ccacustomerprofile.jsp, this attribute is assigned the value of ID as "bottomEl". This results in evaluation of below code as undefined.
                 var tb = document.getElementById[ego.element.adjustHeightToElement];
  • "tabsAlignment" attribute of Tabpane class takes value as left, right or center. In Tabpane function of tabpane.js, table element is created and assigned the value of this attribute to its float style. The table’s style, align set to, ”center” attribute has been deprecated. Hence, if tabsAlignment attribute is assigned a value as “center” then the tab is not aligned to center.
  • When a tab is clicked (selected/active), disabled and then enabled, the style class assigned is tabPaneTab instead of tabPaneTabSelected. The style class assignment in this scenario is incorrect in the enable function of tabpane.js.

Error Messages

Not Applicable.

Steps to Reproduce

Use the attributes (adjustHeightToElement and tabsAlignment) in the OOTB/custom jsp page to observe the first and second issues.
Click a tab (selected/active), disable and then enable to observe the third issue.

Root Cause

The root cause of these issues are listed below respectively. 
  • The code for calculation of adjustHeightToElement is incorrect.
  • The table align=”center” attribute has been deprecated. 
  • The assignment of style className is incorrect for enable function.


This issue is resolved by HFix-917. This addresses the issues in below manner:
  • For evaluation of the attribute adjustHeightToElement, the square brackets are changed to parenthesis. The parentNode is referred with ego object. Below is the modified code:
var adjustHeightToElement = ego.element.getAttribute("adjustHeightToElement");
         if (typeof(adjustHeightToElement) === 'string') {
                        var tb = document.getElementById(adjustHeightToElement);
        if (tb) {
                         var pe = ego.element.parentNode;
  • Conditional check is added for tabsAlignment for allowing tabs to be center aligned. Below is the modified code:
    if (ego.element.tabsAlignment === "center")
        else {
               = ego.element.tabsAlignment;
  • Conditional check is added for selected tab and then assignment of related style className is performed. Below is the modified code:
      if (oTabPane.selectedIndex == this.index) {
         el.className = "tabPaneTabSelected";
      } else {
         el.className = "tabPaneTab";


Published January 8, 2016 - Updated October 8, 2020

Was this useful?

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us