11 Replies Latest reply on Aug 2, 2013 6:11 AM by Klaus Schuster

    modalpanel and scrollbars

    Thomas Zillinger Newbie

      Hi,

      I am currently using a modalpanel which contains a rich:tree. I'd like to have the modalpanel display html scrollbars if the rich:tree within extends the modalpanel. Is there a 'proper' way to do that?

      It seems that if I use style="overflow:scroll" (or auto) as an attribute in modalpanel, that this would will be overwritten. Also setting overflow for the css '.rich-mpnl-body' does not work since the div element using this class overwrites this value in the style attribute (BTW this css attribute seems to be wrong on the homepage (.rich-mpnl-pnl-body does not exist in the html source code).

      *ref: http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html_single/index.html#modalPanel

        • 1. Re: modalpanel and scrollbars
          Ilya Shaikovsky Master

          You may put the div element as a child to modal panel and include all you content to this div. After set the scrolls for this element.

          • 2. Re: modalpanel and scrollbars
            Thomas Zillinger Newbie

            I'm currently trying that - but I have difficulties making the scrollbars fit within the modalpanel, since style="height:100%" together with 'overflow:auto' makes the scrollbars larger than the modalpanel.

            • 3. Re: modalpanel and scrollbars
              Thomas Zillinger Newbie

              For those who are interested. I found a way to add a scrollbar to the modalpanel. The main problem is that if I used the .rich-mpnl-body class to overwride with overflow:auto!important it always needed the height attribute as well. But since % are ugly to use I searched a little bit through the html source-code and found the .dr-mpnl-pnl class which adds a scrollbar nicely fitted in the modal-panel.

              <style type="text/css">
               .dr-mpnl-pnl {overflow:auto!important}
               .rich-mpnl-body { height: 92%; width:99%; padding:0px; }
               .rich-mpnl-body .content { padding: 10px; }
              </style>
              


              <a href="javascript:Richfaces.showModalPanel('webacform3:panel3')">
              <h:outputText id="currentlySelectedProduct"
               value="#{chooseActivation_backing.productTypes.selectedProduct
               == null ? 'Produkt auswählen' :
               chooseActivation_backing.productTypes.selectedProduct.name}"/></a>
              <rich:modalPanel id="panel3"
               resizeable="false" moveable="false" height="300" width="400">
               <f:facet name="header">
               <h:outputText value="Produkt auswählen"></h:outputText>
               </f:facet>
               <f:facet name="controls">
               <a href="javascript:Richfaces.hideModalPanel('webacform3:panel3')">X</a>
               </f:facet>
               <div class="content" >Mögliche Produkte: <br />
               <rich:tree id="tree" switchType="client"
               value="#{chooseActivation_backing.productTypes.currentProducts2}"
               var="data" ajaxSubmitSelection="true"
               reRender="currentlySelectedProduct"
               preserveModel="none"
               immediate="false"
               nodeSelectListener="#{chooseActivation_backing.productTypes.onTreeSelect}">
               </rich:tree></div>
              </rich:modalPanel>
              


              • 4. Re: modalpanel and scrollbars
                Andreas Reiser Newbie
                It seems that this solution doesn't work if <rich:modalPanel autosize="true">...
                • 5. Re: modalpanel and scrollbars
                  Ilya Shaikovsky Master
                  if panel autosized - it's expanded to the content. Where do you want scrolls in this case?
                  • 6. Re: modalpanel and scrollbars
                    Andreas Reiser Newbie
                    Right, the modal panel will be expanded according to the size of its content. However, if your browser window is too small, no scrollbars will be attached to the modal panel and you can only see a small part of the panel.
                    • 7. Re: modalpanel and scrollbars
                      Ilya Shaikovsky Master
                      modal panel in this case expanded to the size of content. And not depends on browser window size.
                      • 8. Re: modalpanel and scrollbars
                        Andreas Reiser Newbie

                        Yes, you said that before... however, that doesn't solve the problem.

                         

                        For instance: Suppose that your panel content is higher than your browser window's height. In addition, suppose that your modalpanel resides in a container with a fixed height. Then, if the panel pops up, no scrollbar will be attached to the browser's window and you won't be able to scroll to the bottom of the modal box.

                        • 9. Re: modalpanel and scrollbars
                          Sergey Smirnov Master

                          What I have in my project is below. The dialog height is adopted for the height of the window. The scroll is appeared only if no enough space for content.  resizeCTDialog() is invoked when windows is resized. The listener is added on the parent page with

                          jQuery(window).bind('resize', function() {resizeCTDialog()})

                           

                           

                          <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                              xmlns:ui="http://java.sun.com/jsf/facelets"
                              xmlns:h="http://java.sun.com/jsf/html"
                              xmlns:f="http://java.sun.com/jsf/core"
                              xmlns:a4j="http://richfaces.org/a4j"
                              xmlns:s="http://jboss.com/products/seam/taglib"
                              xmlns:rich="http://richfaces.org/rich">

                           

                                  <rich:modalPanel id="ctDialog"
                                       onshow="adoptCTDialogHeight()"
                                       autosized="true">
                                      <a4j:form>
                                          <a4j:outputPanel id="createLibraryTasks" layout="block">       
                                              <a4j:outputPanel id="ctContent" styleClass="dte-content" layout="block">

                           

                                                  dialog content here
                                                                                      
                                              </a4j:outputPanel>

                           

                                                   buttons


                                          </a4j:outputPanel>
                                      </a4j:form>   
                                  </rich:modalPanel>       
                                 
                              <script>
                                  //<![CDATA[
                                  function adoptCTDialogHeight() {

                           

                                      if (jQuery(window).height() -
                                              jQuery(#{rich:element('ctContent')}).height() < 130) {
                                                  addScrollToCTDialog();
                                          }
                                  }

                           

                                  function resizeCTDialog() {
                                      if (#{rich:component('ctDialog')}.shown) {
                                          #{rich:component('ctDialog')}.hide();
                                          resetScrollToCTDialog();
                                          #{rich:component('ctDialog')}.show();
                                          adoptCTDialogHeight();
                                      }
                                  }
                                  //]]>
                              </script>
                             
                              <rich:jQuery name="addScrollToCTDialog" timing="onJScall" selector="#ctContent"
                                  query="css('overflow-y','auto').css('overflow-x','hidden').css('height', jQuery(window).height() - 130)" />
                                 
                              <rich:jQuery name="resetScrollToCTDialog" timing="onJScall" selector="#ctContent"
                                  query="css('height','auto').css('overflow-y','auto').css('overflow-x','hidden')" />
                                 
                                 
                          </ui:composition>

                          • 10. Re: modalpanel and scrollbars
                            Henki Lubis Newbie

                            If you use DIV and got difficult to adjust DIV size to modal panel size, you can use this tricked

                             

                            http://www.hell0w0rld.co.cc/2010/09/how-to-make-scroll-bar-in-richfaces-modalpanel/

                            • 11. Re: modalpanel and scrollbars
                              Klaus Schuster Newbie

                              I have a scrolllbar with an div between the richfaces modalpanel, and everything works fine, also when I resize the window.

                              the only problem is, that when I popup up the modalpanel, the scrolling from the main page is also used when I reach the bottom of the scrolling in the modal panel.

                              overflow: hidden would be great for the html or body section in that time when I popup the modal panel.

                              Anyone any idea how to pass this on to the main styles ?
                              thanks,

                              Klaus