4 Replies Latest reply on Jul 11, 2010 8:09 PM by Nick Cuneo

    Add scrollbar to a resizable rich:modalPanel

    Tim Nguyen Newbie

      I am trying to add a scrollbar to a resizable rich:modalPanel but couldn't make it work. Richfaces has some bugs on the modalPanel and I am trying to work around.
      Is anyone able to make it work? Please help. I am using RF 3.2.2 but upgrade to 3.3.0 GA soon.

      Here are some modals I tested with but not working:
      1. Add scrollbar to resizable rich:modalPanel.
      --> Bug: Break in IE:
      https://jira.jboss.org/jira/browse/RF-4901

      2. Create a wrapper to wrap my content and add scroll bar to this wrapper.
      --> the wrapper's content went out of the modal and I have to expand the modal to see the scrollbar.

      <!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:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:rich="http://richfaces.org/rich">
      <head>
       <style type="text/css">
       .dr-mpnl-pnl {border=1px;border-color: #0000ff;overflow:auto!important}
       </style>
      </head>
      
      <body>
      
       <rich:modalPanel id="panel" resizeable="true" left="60" top="60"
       width="200" height="150" >
       <f:facet name="header"> Header</f:facet>
       <f:facet name="controls">
       <h:graphicImage
       value="resource:///com/ui/html/image/close.png"
       style="cursor:pointer"
       onclick="Richfaces.hideModalPanel('panel')" />
       </f:facet>
       Content is here 123 123 123 123 123 <br/>
       Content is here 123 123 123 123 123 <br/>
       Content is here 123 123 123 123 123 <br/>
       Content is here 123 123 123 123 123 <br/>
       Content is here 123 123 123 123 123 <br/>
       </rich:modalPanel>
       <br/>
       <h:outputLink value="#" id="link"> Show Modal Panel
       <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
       </h:outputLink>
      </body>
      </html>
      
      


        • 1. Re: Add scrollbar to a resizable rich:modalPanel
          Juan Gonzalez Newbie

          Simply add a div with css style into the modalPanel content like this:

          <!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:h="http://java.sun.com/jsf/html"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:rich="http://richfaces.org/rich">
          <head>
           <style type="text/css">
           .dr-mpnl-pnl {
           border=1px;
           border-color:#0000ff;
           overflow:auto!important
           }
           .modalPanelScrollbar{
           overflow:auto;
           {
           </style>
          </head>
          
          <body>
          
           <rich:modalPanel id="panel" resizeable="true" left="60" top="60"
           width="200" height="150" >
           <f:facet name="header"> Header</f:facet>
           <f:facet name="controls">
           <h:graphicImage
           value="resource:///com/ui/html/image/close.png"
           style="cursor:pointer"
           onclick="Richfaces.hideModalPanel('panel')" />
           </f:facet>
           <div class="modalPanelScrollbar">
           Content is here 123 123 123 123 123 <br/>
           Content is here 123 123 123 123 123 <br/>
           Content is here 123 123 123 123 123 <br/>
           Content is here 123 123 123 123 123 <br/>
           Content is here 123 123 123 123 123 <br/>
           </div>
           </rich:modalPanel>
           <br/>
           <h:outputLink value="#" id="link"> Show Modal Panel
           <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
           </h:outputLink>
          </body>
          </html>
          


          • 2. Re: Add scrollbar to a resizable rich:modalPanel
            Tim Nguyen Newbie

            Thanks Juangon, but it didn't fix the problem. It is still broken in IE when you try to resize the windows.

            For the 2nd solution, I created a wrapper to wrap my content and add scroll bar to this wrapper as below but it didn't work :(

            <!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:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:rich="http://richfaces.org/rich">
            <head>
             <style type="text/css">
             div.reportModalContentWrapper { overflow:auto; margin: 3px; padding: 0; border-style: solid; border-width: 1px; border-color: #0000ff; height:95%; width: 95%; position:relative;}
             .dr-mpnl-pnl-b {padding:1px; }
             div.reportModalPromptWrapper {margin: 1px; padding: 0; width: 98%; height: 98%;}
             </style>
            </head>
            
            <body>
             <rich:modalPanel id="panel" resizeable="true" left="60" top="60"
             width="200" height="150">
            
             <f:facet name="header"> Header</f:facet>
             <f:facet name="controls">
             <h:graphicImage
             value="resource:///com/ui/html/image/close.png" style="cursor:pointer"
             onclick="Richfaces.hideModalPanel('panel')" />
             </f:facet>
            
             <div class="reportModalContentWrapper">
             <div class="reportModalPromptWrapper">
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             Content is here 123 123 123 123 123 <br/>
             </div>
             </div>
             </rich:modalPanel>
             <br/>
            
             <h:outputLink value="#" id="link"> Show Modal Panel
             <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
             </h:outputLink>
            </body>
            </html>
            
            





            • 3. Re: Add scrollbar to a resizable rich:modalPanel
              Nick Cuneo Newbie

              Hi there

               

              I'm currently dealing with this problem, can anyone provide a workaround. Help would be greately appreciated.

               

               

              Nick.

              • 4. Re: Add scrollbar to a resizable rich:modalPanel
                Nick Cuneo Newbie

                Pretty please?? Anyone dealt with this resize issue with modals in IE??