2 Replies Latest reply on Mar 8, 2011 11:27 AM by uririch

    Scrollable Rich Modal Panel search window

    uririch Newbie

      Hi,

      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.