0

I need to create tabs and using richfaces:tabpanel component.

The probelm is an extra <td> is genearted by richfaces which contains spacer.gif and thus the tabs have space between them.

I tried using the richfaces:tabpanel property headerspacing="0px"; but the space exists.

We are using richfaces version 3.3.3.Final and jsf version 1.2

jsp:

 <td width="100%">
<rich:tabPanel headerSpacing="0px;">
 <rich:tab id="tab1">
 <f:facet name="label">
 <h:outputText value="Tab1"></h:outputText>
 </f:facet>
  <ui:include src="./tab1.jspx"/>
  </rich:tab>
  <rich:tab id="tab2"> 
  <f:facet name="label">
 <h:outputText value="tab2"></h:outputText>
 </f:facet>
  <ui:include src="./tab2.jspx"/>
 </rich:tab> 
 </rich:tabPanel>
 </div>
 </td>

CSS:

.rich-tabhdr-side-border {
    border: none;   
    background-image: none;
}

.rich-tabhdr-side-cell{
    border: 1px solid #ABAA96;  
    height:23px;
    display:block;
    background:url(../images/ButtonConatinerBG.gif) repeat-x top;
    border-bottom:1px solid #A1A290;
    font-size: 12px;
    font-weight:bold;
    color: #FFFFFF;
    }

.rich-tabpanel-content {
 font-family: verdana;
font-size: 12px;
color: #000000;    
background-color:#F9F9FB; 
 }
Tyler Jandreau
  • 4,245
  • 1
  • 22
  • 47
user1584209
  • 1

1 Answers1

1

You can hide those spacers with CSS:

.rich-tabpanel img[src="path/to/spacer.gif"] {
    display: none;
}
Makhiel
  • 3,874
  • 1
  • 15
  • 21