Support Article
Issue with tabpane component
SA-10649
Summary
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.
- "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.
Resolution
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:
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:
t2.style.margin="auto";
else {
t2.style.float = ego.element.tabsAlignment;
}
- Conditional check is added for selected tab and then assignment of related style className is performed. Below is the modified code:
el.className = "tabPaneTabSelected";
….
} else {
el.className = "tabPaneTab";
…
}
Published January 8, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.