Hi, guys
There's one more migration issue. In RF 3.x the following code was rendered properly.
In RF 4.2 the tab height is fixed and is not auto-aligned with exact tab height.
| <rich:tabPanel switchType="client"> |
| | <rich:tab> |
| | | | | <f:facet name="header"> |
| | | | | | <a4j:outputPanel> |
| | | <h:graphicImage value="/images/icons/common/rf.png" |
| | | style="float:right" alt="rf" /> |
| | | | <div><h:outputText value="Test" /></div> |
| | | | | | </a4j:outputPanel> |
| | | | | </f:facet> |
| | RichFaces is a component library for JSF and an advanced framework for |
| | easily integrating AJAX capabilities into business applications. |
| | </rich:tab> |
| | <rich:tab header="JSF 2 and RichFaces 4"> |
| | </rich:tab> |
| </rich:tabPanel> |
I played with several style attributes of rich:tabPanel but no one could help.
The deeper investigation showed that the tab height is actually always fixed(25 px) in resulting HTML(TabPanelRenderer)
.rf-tab-hdr-tabline-vis.rf-tab-hdr-tabline-top {
height: 25px;
}
<div class="rf-tab-hdr-tabline-vis rf-tab-hdr-tabline-top">
<table class="rf-tab-hdr-tabs" cellspacing="0">
| | w.startElement(DIV, comp); |
| | AbstractTabPanel tabPanel = (AbstractTabPanel) comp; |
| | if (tabPanel.isHeaderPositionedTop()) { |
| | w.writeAttribute(CLASS, "rf-tab-hdr-tabline-vis rf-tab-hdr-tabline-top", null); |
| | } else { |
| | w.writeAttribute(CLASS, "rf-tab-hdr-tabline-vis rf-tab-hdr-tabline-btm", null); |
| | } |
The only solution is to update the tab height in css
.rf-tab-hdr-tabline-vis.rf-tab-hdr-tabline-top {
height:70px;
}
However it is not always good because we don't know exact height for each tab panel. Moreover we have
tab panels with different tab contents so we have to update the css for each file.
Is there more elegant solution?
