Archive for September, 2010

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”>

Posted in Uncategorized | 5 Comments »