« How to disable xwindows in centos
Non-terminating decimal expansion »
 

How to make scroll bar in RichFaces ModalPanel

| September 23rd, 2010

There are 2 approaches to do this
1) Using DIV (I like this one)

<rich:modalPanel id="panelId" width="600" height="600">
	<f:facet name="header">
			<h:outputText value="Title Here" />
	</f:facet>
	<f:facet name="controls">
		<h:panelGroup>
			<h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelink"/>
			<rich:componentControl for="panelId" attachTo="hidelink" operation="hide" event="onclick"/>
		</h:panelGroup>
	</f:facet>
	<h:outputText>
		<div style="width:400px;height:290px;overflow:auto;">
		<h:panelGrid columns="2" columnClasses="name,value">
			<h:outputText value="Value here" />
			<h:outputText value="Value here" />
		</h:panelGrid>
		</div>
	</h:outputText>
</rich:modalPanel>

Using this approach, if you dont manage the div size properly, your DIV wont fit perfectly to the modal panel size and DIV position will look ugly. I used this trick to set the DIV position so it will look nice

  1. Set modal panel WIDTH to what ever you want
  2. Use minHeight instead of HEIGHT for modal panel and the value MUST smaller than your DIV HEIGTH.
  3. Use autosized=”true” in modal panel

<rich:modalPanel id=”panelId” width=”600″ minHeight=”100″ autosized=”true”>

By doing this, modal panel will have its own width but the heigth will follow the DIV height automatically.

  1. Set DIV WIDTH to 100%
  2. Set DIV HEIGTH to what ever you want

<div style=”width:100%;height:290px;overflow:auto;”>

By doing this, DIV width will follow modal panel width automatically, and DIV will have its own height as you specified and modal panel HEIGHT will be adjusted automatically as explained above.

<rich:modalPanel id="panelId" width="600" minHeight="100" autosized="true">
	<f:facet name="header">
			<h:outputText value="Title Here" />
	</f:facet>
	<f:facet name="controls">
		<h:panelGroup>
			<h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelink"/>
			<rich:componentControl for="panelId" attachTo="hidelink" operation="hide" event="onclick"/>
		</h:panelGroup>
	</f:facet>
	<h:outputText>
		<div style="width:100%;height:290px;overflow:auto;">
		<h:panelGrid columns="2" columnClasses="name,value">
			<h:outputText value="Value here" />
			<h:outputText value="Value here" />
		</h:panelGrid>
		</div>
	</h:outputText>
</rich:modalPanel>

2) Over write modal panel CSS.

Put this code in your css file

<style type=”text/css”>
.dr-mpnl-pnl {overflow:auto!important}
</style>

Posted on Thursday, September 23rd, 2010 at 1:59 am in Uncategorized | rss feed for comments| Leave a response, or trackback

5 Responses to “How to make scroll bar in RichFaces ModalPanel”

  1. May 23rd, 2011 at 7:58 am Mike Dalsey Says:

    Thank you! This was very helpful to me.

  2. September 28th, 2011 at 6:06 am Chris Says:

    Thanks! Approach number 1 it’s my favorite too.

  3. November 14th, 2011 at 3:22 pm fotobuch Says:

    Intellectual blog to scan news.

  4. December 2nd, 2011 at 1:22 am Mital Pritmani Says:

    Thank you for this post. It helped me. :)

  5. February 20th, 2012 at 11:46 pm Feroz Says:

    Thanks for this Post, The Div trick worked. Just one caution do not copy paste the code from the page as there are some junk characters copied too.

Leave a Reply