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

modalPanel not scrolling

majeric Aug 23, 2007 8:42 AM

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

majeric Aug 24, 2007 7:10 AM (in response to majeric)

anyone?
Actions
2. Re: modalPanel not scrolling

giftsam Sep 29, 2008 3:22 AM (in response to majeric)

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;
}
Actions
3. Re: modalPanel not scrolling

akaine Apr 15, 2010 12:41 PM (in response to giftsam)

Doesn't work anymore...
Actions
4. Re: modalPanel not scrolling

sebekk23 May 19, 2010 5:27 AM (in response to majeric)

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

5. Re: modalPanel not scrolling

lmk May 19, 2010 8:41 AM (in response to sebekk23)

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>

<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 Jan 31, 2013 11:19 PM (in response to majeric)

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;
}
Actions
7. Re: modalPanel not scrolling

sivaprasad9394 Feb 4, 2013 4:39 AM (in response to majeric)

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
Actions
8. Re: modalPanel not scrolling

klaus11 Aug 5, 2013 7:32 AM (in response to sivaprasad9394)

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
Actions

Go to original post