Scrollable Rich Modal Panel search window
uririch Mar 3, 2011 1:50 PMHi,
I am trying to code a modal panel to display a datatable of search results, but I am unable to get the modal panel or the datatable to be scrollable.
Here's my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xml:lang="en"lang="en"> <head> <title>UntitledDocument</title> <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <link type="text/css"rel="stylesheet" href="css/global.css"/> <script src="js/sra.js"type="text/javascript"></script> </head> <f:view contentType="text/html;charset=iso-8859-1"/> <body> <h:form id="linkform"> <a4j:commandLink id="wbutton"onmousedown="Richfaces.showModalPanel('panel');" value="Open" reRender="panel"/> <rich:modalPanel id="panel"style="width:900px;" autosized="true"> <div class="scroll_div"> <f:facet name="header">Search Parts</f:facet> <f:facet name="controls"> <h:form> <h:commandLink value="Close" style="cursor:pointer;color:black;" onclick="Richfaces.hideModalPanel('panel')" /> </h:form> </f:facet> <h:form id="srcpartform"> <h:outputText value="Ajax Status:"/> <a4j:status id="commonstatus" startText="Processing..."stopText=""/> <table> <tr> <td> <label>Part-Number</label> </td> <td> <h:inputText id="pnum"value="#{test.pnum}"/> </td> </tr> <tr> <td> <label>Part-Description</label> </td> <td> <h:inputText id="pdesc"value="#{test.pdesc}"/> </td> </tr> <tr> <td><br></br></td> <td> <a4j:commandButton id="srcpart"value="Search" action="#{test.srcpart}"reRender="srcres" eventsQueue="foo"/> </td> </tr> </table> <a4j:outputPanel ajaxRendered="true"> <h:panelGrid rendered="#{test.resrender}"> <h:dataTable id="srcres"binding="#{test.srcpartdt}" value="#{test.partsrcAL}" var="parts"rows="#{test.rowct}" headerClass="dataHeader" columnClass="dataCol" styleClass="dataTable"> <h:column> <f:facet name="header">Part Number</f:facet> <h:outputText value="#{parts.part_number}"/> </h:column> <h:column> <f:facet name="header">Description</f:facet> <h:outputText value="#{parts.description}"/> </h:column> </h:dataTable> </h:panelGrid> </a4j:outputPanel> </h:form> </div> </rich:modalPanel> </body> </html>
an CSS code for scroll_div:
.scroll_div{ overflow: scroll; } .rich-mpnl-panel { position: inherit; }
Thanks.