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

Add scrollbar to a resizable rich:modalPanel

timgozag May 18, 2009 6:26 PM

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

juangon May 19, 2009 2:48 AM (in response to timgozag)

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

timgozag May 19, 2009 11:41 AM (in response to timgozag)

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

ncuneo Jul 8, 2010 4:20 AM (in response to timgozag)

Hi there

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

Nick.
Actions
4. Re: Add scrollbar to a resizable rich:modalPanel

ncuneo Jul 11, 2010 8:09 PM (in response to timgozag)

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

Go to original post