Hiding exceeded data in h:dataTable columns

Question

hi,
my requirement is I have to display some data in dataTable and I need to put fixed height for the columns.if the data in that column exceeds then the data should hide and onmouseover one tooltip should come showing the exceeded data.
but the jsf data table is not hiding the data at all.I have given width and height for that column using css but it is showing the data completely.
please tell me how can I do this one.

Answer 1

Hi,
I tried using overflow property also..but i is not working for me..I am sending my code also
<h:dataTable id="popresults"
value="#{popsearch.popList}"
var="pop"
columnClasses="name"
border="0" rowClasses="standardTable_Row2,standardTable_Row1"
headerClass="DHTMLSuite_tableWigdet_headerCellDown_searchlist" style="vertical-align:middle;" styleClass="tableList_search" width="100%" cellpadding="1" cellspacing="0">
          <h:column>
<f:facet name="header">
<h:outputText value="POP Id" style="text-decoration:none;color:black;font-weight:bold;"/>
     </f:facet>
          <h:commandLink id="id"
                         action="#{popdetails.getPOPDetails}"
                         actionListener="#{popsearch.selectPOP}" onmouseover="ddrivetip('#{pop.id}')" onmouseout="hideddrivetip()">
               <h:outputText value="#{pop.id}" style="text-decoration: none;color: black;border-bottom: 1px solid black;" />
               <f:param id="popId"
                         name="popId"
                         value="#{pop.id}" />
               <f:param id="discriminator"
                         name="discriminator"
                         value="#{pop.discriminator}" />
          </h:commandLink>
     </h:column>
     <h:column>
<f:facet name="header">
     <h:panelGrid columns="2">
     <h:commandLink value="Provider Id" action="#{popsearch.getPopResults}" actionListener="#{popsearch.sortPidDataList}" style="text-decoration:none;color:black;font-weight:bold;">
<f:attribute name="providerid" value="providerID"/>
     </h:commandLink>
     <h:graphicImage id="pidarrowup" url="#{popsearch.popimg}" rendered="#{popsearch.pidren}"/>
</h:panelGrid>
</f:facet>
<h:outputLabel value="#{pop.providerID}" onmouseover="ddrivetip('#{pop.providerID}')" onmouseout="hideddrivetip()"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Modem Phone"/>
</f:facet>
<h:outputLabel value="#{pop.modemPhone}" onmouseover="ddrivetip('#{pop.modemPhone}')" onmouseout="hideddrivetip()"/>
</h:column>
     <h:column>
<f:facet name="header">
<h:panelGrid columns="2">
     <h:commandLink value="POP Class" action="#{popsearch.getPopResults}" actionListener="#{popsearch.sortPclassDataList}" style="text-decoration:none;color:black;font-weight:bold;">
<f:attribute name="popClass" value="discriminator"/>
     </h:commandLink>
                    <h:graphicImage id="pclassarrowup" url="#{popsearch.popimg}" rendered="#{popsearch.pclassren}"/>
</h:panelGrid>
</f:facet>
<h:outputText value="Broadband" rendered="#{pop.discriminator eq 'B'}">
</h:outputText>
<h:outputText value="Dial" rendered="#{pop.discriminator eq 'D'}">
</h:outputText>
</h:column>
     <h:column>
<f:facet name="header">
<h:outputText value="Location" />
</f:facet>
<h:outputLabel value="#{pop.siteAddress}" rendered="#{pop.discriminator eq 'B'}" onmouseover="ddrivetip('#{pop.siteAddress}')" onmouseout="hideddrivetip()"/>
</h:column>
</h:dataTable>
and css is
.name {
width: 25px;
text-align: left;
nowrap:true
white-space:nowrap
overflow:hidden
please tell me If I missed any thing.