Support Article
Query on tab page
SA-10347
Summary
How to set height for tabs in ccacustomerprofile page?
How the adjustHeightToElement="bottomEl" works ?
Custom tab are not aligned properly and on selection of a tab, tab being selected is not highlighted) in Chrome 38. This is same behavior in IE11. However, same works properly in IE8.
Resolution
The explanation for this behavior is as follows:
We have adjustHeightToElement attribute in the ccacustomerprofile.jsp that takes the value of id with ‘bottomEl’. Below is the code snippet:
<div id="customerProfileTabPane" class="tabpane" adjustHeightToElement="bottomEl" adjustOffset="3" tabPagePadding="4 0 0 0" style="margin-top:-4px;height:100%;width:100%;" tabsAlignment="right" onTabClick="hideActivitiesHeader();doCustProfileTabSelected();">
….
<td id="bottomEl" style="background-color: white;">
The logic to calculate adjustHeightToElement attribute is defined in doResize method of tabpane.js. Below is the snippet:
function doResize() {
clearTimeout(timeoutId);
timeoutId = setTimeout(doResizeEnd, 200);
if (ego.element.adjustHeightToElement) {
var tb = document.getElementById[ego.element.adjustHeightToElement];
if (tb) {
var pe = element.parentNode;
if (pe)
ego.element.style.height = Math.floor(( (pe.clientHeight - tb.clientHeight + ego.element.adjustOffset) / (pe.clientHeight + tb.clientHeight)) * 100) + "%";
else
ego.element.style.height = Math.floor(( (ego.element.clientHeight - tb.clientHeight + ego.element.adjustOffset) / (ego.element.clientHeight + tb.clientHeight)) * 100) + "%";
}
pe = null;
tb = null;
}
};
For the custom styles, below attributes needs to be added to the tabPane class default.css.
- Add below behavior to tabpaneTab class. This will remove the bottom border for the tab.
border-bottom: 0px;
- remove/comment background-color behavior from tabpaneTabText class
- add below in tabPaneTab class
color: white; (commenting color: #0C479D;)
- Comment color behavior from tabpaneTabText class
- Add color, background-color behavior to tabpaneTab class
- Add color, background-color behavior to tabpaneTabSelected class
Published June 12, 2015 - 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.