9 Replies Latest reply on Jan 17, 2008 9:35 PM by Andrew Elegante

    modalPanel with vertical scrollbar?

    Dennis Ryan Newbie

      Has anyone been able to get a vertical scrollbar in a modalPanel to appear?? and how?

      thanks,
      dennis

        • 1. Re: modalPanel with vertical scrollbar?
          Ilya Shaikovsky Master

          around your content inside modal panel to :

          <rich:modalPanel ..>
           <div class="panel">
           </div>
          </rich:modalPanel>
          

          where
          .panel{
           overflow: scroll !important;
          }
          

          works for my case.

          Let us know if additional problems appears.

          • 2. Re: modalPanel with vertical scrollbar?
            Dennis Ryan Newbie

            the scrollbar shows up but doesn't work as expected.

            see image:


            -dennis

            • 4. Re: modalPanel with vertical scrollbar?
              Sergey Smirnov Master

              Most likely, you need to have a height fixed for modal Panel and have scrollable div height defined explicitly. (Different browsers have different behavior when height is not defined or set to 100%)


              P.S.

              "rhodyfan" wrote:
              [img]http://www.picsoup.com/images/70893dialog.jpg[/img]

              Use for posting image next time: < img src="foo" >

              • 5. Re: modalPanel with vertical scrollbar?
                Dennis Ryan Newbie

                almost there! Is there a way to minimize the padding or margin around the inside of modal dialog? I tried a few css classes but with no luck.

                here is what it looks like now:


                thanks,
                Dennis

                • 6. Re: modalPanel with vertical scrollbar?
                  Sergey Smirnov Master

                  The documentation is a right place. Also, you can use FireBug extension of FireFox to see what styles are applied on particular elements of UI.

                  BWT, the bottom border is missing on your screenshot. Do you use RichFaces 3.0.0 or 3.0.1 Snapshot ?

                  • 7. Re: modalPanel with vertical scrollbar?
                    Dennis Ryan Newbie

                    I tried the "rich-mpnl-pnl-body" class but didn't see any effect...I'll give Firebug a look.

                    I noticed the missing bottom border, it has to do with the height of the content in the panel. It does show up when the content fits inside the panel without overflow. Yes, I am using 3.0.0 and not the snapshot, I guess I will give that a try next.

                    thanks,
                    dennis

                    • 8. Re: modalPanel with vertical scrollbar?
                      Dennis Ryan Newbie

                      I got it working/looking real good now!



                      the class "rich-mpnl-pnl-b" seems to be the one that worked for me, and by adjusting the height of the main div inside the modalPanel tag I was able to ge t the bottom border to show. Im still using the 3.0.0 jar.


                      thanks everyone!

                      • 9. Re: modalPanel with vertical scrollbar?
                        Andrew Elegante Newbie

                        I have a similar problem but I'm re-rendering a rich:datatable in the panel and sometimes it gets to be rather large. Paging isn't really an option because the list needs to be quickly browsable without having to go back to the server. I've tried the solution given here as well as trying to just place a scrollable div tag around the data table (this would be optimal for me) and I can't get it to work when I re-render the table.

                        Here's my .css

                        .popupPanel {
                         overflow-y: auto;
                         height:400;
                         max-height: 400;
                        }
                        


                        Here's where I'm at with the page:
                        <rich:modalPanel id="businessFinder" resizeable="true" width="600" height="400" >
                         <f:facet name="header">
                         <h:outputText value="#{messages['businessFinder.title']}" />
                         </f:facet>
                         <f:facet name="controls">
                         <h:graphicImage value="/img/close.png" onclick="Richfaces.hideModalPanel('businessFinder');" />
                         </f:facet>
                         <a4j:region id="bizFinder" renderRegionOnly="true">
                         <h:form id="bizSearchForm" prependId="false">
                         <s:decorate template="/WEB-INF/facelets/layout/edit.xhtml">
                         <ui:define name="label">#{messages['businessFinder.businessId']}:</ui:define>
                         <h:inputText value="#{uiBusinessFinder.searchConfig.businessId}" />
                         </s:decorate>
                         <s:decorate template="/WEB-INF/facelets/layout/edit.xhtml">
                         <ui:define name="label">#{messages['businessFinder.siteId']}:</ui:define>
                         <h:inputText value="#{uiBusinessFinder.searchConfig.siteId}" />
                         </s:decorate>
                         <s:decorate template="/WEB-INF/facelets/layout/edit.xhtml">
                         <ui:define name="label">#{messages['businessFinder.name']}:</ui:define>
                         <h:inputText value="#{uiBusinessFinder.searchConfig.name}" />
                         </s:decorate>
                         <br />
                         <div class="buttonBox">
                         <a4j:commandButton styleClass="button" id="bizSearch" onclick="this.disabled=true;" oncomplete="this.disabled=false;"
                         action="#{uiBusinessFinder.doSearch}"
                         value="#{messages['button.search']}" reRender="bizFinderSearchResults,bizSearch,bizfinder" />
                        
                        
                         <a4j:status>
                         <f:facet name="start">
                         <h:graphicImage value="/img/spinner.gif"/>
                         </f:facet>
                         </a4j:status>
                         </div>
                         <rich:messages />
                         </h:form>
                         <br />
                         <div id="bizfinderDiv" class="popupPanel" >
                         <rich:dataTable id="bizFinderSearchResults" value="#{businessSearchResults}" var="biz">
                         <f:facet name="header">
                         <h:outputText value="#{messages['businessFinder.results']}" />
                         </f:facet>
                         <rich:column>
                         <f:facet name="header">
                         <h:outputText value="#{messages['businessFinder.select']}" />
                         </f:facet>
                         <h:outputLink value="javascript:setToOpener(#{biz.businessId});" >
                         #{messages['businessFinder.select']}
                         </h:outputLink>
                         </rich:column>
                         <intra:column messagePrefix="businessFinder" entity="#{biz}" fieldName="businessId" sort="false" colType="basic" />
                         <intra:column messagePrefix="businessFinder" entity="#{biz}" fieldName="name" sort="false" colType="basic" />
                         <intra:column messagePrefix="businessFinder" entity="#{biz}" fieldName="type" sort="false" colType="enum" />
                         <f:facet name="footer">
                         <rich:messages globalOnly="true" />
                         </f:facet>
                         </rich:dataTable>
                         </div>
                         </a4j:region>
                         </rich:modalPanel>
                        


                        Any help or tips would be greatly appreciated :)

                        Drew