8 Replies Latest reply on Aug 5, 2013 7:32 AM by klaus11

    modalPanel not scrolling

      When I display a modalPanel it's to big to show it on one screen.
      How can I do to scroll down with browser scroller without adding a

      It works fine if I change some styles with firebug.
      My changes (I have a modalPanel with id popupId):
      I moved position: absolute; in div with id popupIdContainer to div with id popupIdCDiv

      Original code:

      <div id="tlf_usmerjevalniki_containerContainer" class="rich-modalpanel" position: absolute; style="z-index: 100;">
      <div id="tlf_usmerjevalniki_containerDiv" class="dr-mpnl-mask-div rich-mpnl-mask-div" style="z-index: 1;"/>
      <div id="tlf_usmerjevalniki_containerCursorDiv" class="dr-mpnl-mask-div rich-mpnl-mask-div" style="opacity: 0.01; z-index: -200;"/>
      <div id="tlf_usmerjevalniki_containerCDiv" class="dr-mpnl-panel rich-mpnl_panel" style="width: 1px; height: 1px; z-index: 2; left: 331.5px; top: 50px;">
      <div id="tlf_usmerjevalniki_containerResizerNWU" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: nw-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerN" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 604px; height: 4px; z-index: 3; cursor: n-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerNEU" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: ne-resize; left: 564px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerNEL" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: ne-resize; left: 600px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerE" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 604px; width: 4px; z-index: 3; cursor: e-resize; left: 600px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSEU" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: se-resize; left: 600px; top: 564px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSEL" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: se-resize; left: 564px; top: 600px;"/>
      <div id="tlf_usmerjevalniki_containerResizerS" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 604px; height: 4px; z-index: 3; cursor: s-resize; left: 0px; top: 600px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSWL" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: sw-resize; left: 0px; top: 600px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSWU" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: sw-resize; left: 0px; top: 564px;"/>
      <div id="tlf_usmerjevalniki_containerResizerW" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 604px; width: 4px; z-index: 3; cursor: w-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerNWL" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: nw-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerShadowDiv" class="dr-mpnl-shadow rich-mpnl-shadow" style="opacity: 0.1; width: 600px; height: 600px;"/>
      <div id="tlf_usmerjevalniki_containerContentDiv" class="dr-mpnl-pnl" style="overflow: hidden; position: absolute; z-index: 2; width: 600px; height: 600px;">
      </div>
      </div>
      


      Changed code:
      <div id="tlf_usmerjevalniki_containerContainer" class="rich-modalpanel" style="z-index: 100;">
      <div id="tlf_usmerjevalniki_containerDiv" class="dr-mpnl-mask-div rich-mpnl-mask-div" style="z-index: 1;"/>
      <div id="tlf_usmerjevalniki_containerCursorDiv" class="dr-mpnl-mask-div rich-mpnl-mask-div" style="opacity: 0.01; z-index: -200;"/>
      <div id="tlf_usmerjevalniki_containerCDiv" class="dr-mpnl-panel rich-mpnl_panel" style="position: absolute; width: 1px; height: 1px; z-index: 2; left: 331.5px; top: 50px;">
      <div id="tlf_usmerjevalniki_containerResizerNWU" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: nw-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerN" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 604px; height: 4px; z-index: 3; cursor: n-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerNEU" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: ne-resize; left: 564px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerNEL" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: ne-resize; left: 600px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerE" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 604px; width: 4px; z-index: 3; cursor: e-resize; left: 600px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSEU" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: se-resize; left: 600px; top: 564px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSEL" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: se-resize; left: 564px; top: 600px;"/>
      <div id="tlf_usmerjevalniki_containerResizerS" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 604px; height: 4px; z-index: 3; cursor: s-resize; left: 0px; top: 600px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSWL" class="dr-mpnl-resizer rich-mpnl-resizer" style="width: 40px; height: 4px; z-index: 13; cursor: sw-resize; left: 0px; top: 600px;"/>
      <div id="tlf_usmerjevalniki_containerResizerSWU" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: sw-resize; left: 0px; top: 564px;"/>
      <div id="tlf_usmerjevalniki_containerResizerW" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 604px; width: 4px; z-index: 3; cursor: w-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerResizerNWL" class="dr-mpnl-resizer rich-mpnl-resizer" style="height: 40px; width: 4px; z-index: 13; cursor: nw-resize; left: 0px; top: 0px;"/>
      <div id="tlf_usmerjevalniki_containerShadowDiv" class="dr-mpnl-shadow rich-mpnl-shadow" style="opacity: 0.1; width: 600px; height: 600px;"/>
      <div id="tlf_usmerjevalniki_containerContentDiv" class="dr-mpnl-pnl" style="overflow: hidden; position: absolute; z-index: 2; width: 600px; height: 600px;">
      </div>
      </div>
      


      Please help me or tell me how to contact developers to change this.



        • 1. Re: modalPanel not scrolling

          anyone?

          • 2. Re: modalPanel not scrolling

            Hi ,
            Eventually I had founded the solution for this problem.I moved thro your page while searching the key for this solution.Anyway sorry for the late response. here you have to add two classes in the *.css file, and modal panel is scrolling with window:

            .rich-samplePanel {
            position:static !important;
            }

            .rich-samplePanel2 {
            position:absolute;
            }

            • 3. Re: modalPanel not scrolling
              akaine

              Doesn't work anymore...

              • 4. Re: modalPanel not scrolling
                sebekk23

                In previous version of Richfaces library (3.3.1) position: absolute !important worked fine for modalpanel. BTW i have similar problem. Helllppp, please .

                • 5. Re: modalPanel not scrolling
                  lmk

                  do not  know changes on RF 3..3.3..I got the same problem and found another solution:

                   

                   

                  <rich:modalPanel style="overflow:auto;">
                  
                  </rich:modalPanel>
                  

                   

                   

                  Or

                   

                   

                  <style>
                     .scroll{
                          overflow: scroll;
                          width:100%;
                          height:100%;
                     }
                     </style>
                  <rich:modalPanel id="myModalPanel" height="500" width="500">
                            <div class="scroll">
                         ..
                          </div>
                  </rich:modalPanel>
                  • 6. Re: modalPanel not scrolling
                    lobotomy

                    If anyone interested. Before 3.3.2 it was

                    .rich-modalpanel {

                        position:static !important;

                    }

                     

                    3.3.2 and 3.3.3 it is

                     

                    .rich-mpnl-panel {

                        position:static !important;

                    }

                    • 7. Re: modalPanel not scrolling
                      sivaprasad9394

                      try like below,

                       

                      <rich:modalPanel id="info_vas_editmodal" moveable="false" resizeable="false"

                              width="950" height="450" showWhenRendered="false" style="overflow-y: scroll">

                       

                      I hope it careats scroll for you.

                       

                      Thanks,

                      Siva

                      • 8. Re: modalPanel not scrolling
                        klaus11

                        And what if you want the header to remain stationary, while you scroll though the content? Is there a solution for this, pls?
                        Scrolling with header and content is made by .rich-mpnl-content to set to overflow: auto!important

                        thanks, klaus