My JSF form contains a popup panel. The code is here:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Partner Manager</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script src="script/script.js" />
</h:head>
<h:body>
<h:outputText id="progress_bar" styleClass="progress-bar" />
<div id="header">
<div class="header-content">
<img src="images/logo2.png" />
<div class="header-message">
<p class="links">
<a href="#">Sign Out</a>
</p>
<p class="welcome">
Welcome <label>John Smith</label> <span>Associate Manger</span>
</p>
</div>
</div>
</div>
<div id="container">
<h:form>
<fieldset class="search-area">
<rich:calendar value="#{partnerBean.selectedStartDate}"
datePattern="yyyy-MM-dd" />
<rich:calendar value="#{partnerBean.selectedEndDate}"
datePattern="yyyy-MM-dd" />
<h:selectOneMenu label="Categories" id="categories"
style="width:200px" styleClass="dilevery"
value="#{partnerBean.selectedDeliveryMethod}">
<f:selectItem itemLabel="Select Type" itemValue="Select Type" />
<f:selectItem itemLabel="Select Type" itemValue="Select Type" />
<f:selectItem itemLabel="Select Type" itemValue="Select Type" />
<f:selectItem itemLabel="Select Type" itemValue="Select Type" />
</h:selectOneMenu>
<a4j:commandButton id="searchButton" value="Search"
onbegin="showProgressBar();" oncomplete="hideProgressBar();"
render="@form,tableDv,transactionTable"
action="#{partnerBean.searchPartnersTransactions}"
styleClass="search-btn" />
<a4j:commandLink href="#" styleClass="add-teller"
title="Add Partner">Add Partner
<rich:componentControl target="popup" operation="show" />
</a4j:commandLink>
</fieldset>
<div class="tableDv">
<rich:dataTable id="transactionTable"
value="#{partnerBean.partnerTransactions}" var="transaction">
<rich:column>
<f:facet name="header">
<h:outputText value="Date of Transaction" />
</f:facet>
<h:outputText value="#{transaction.dateOfTransaction}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Transaction ID" />
</f:facet>
<h:outputText value="#{transaction.transactionID}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Recipient name" />
</f:facet>
<h:outputText value="#{transaction.recipientName}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Amount Sent" />
</f:facet>
<h:outputText value="#{transaction.amountSent}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Recipient's Phone No" />
</f:facet>
<h:outputText value="#{transaction.recipientPhoneNumber}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Sender's name" />
</f:facet>
<h:outputText value="#{transaction.senderName}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Type of Delivery Method" />
</f:facet>
<h:outputText value="#{transaction.typeOfDelivery}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Partner Fee" />
</f:facet>
<h:outputText value="#{transaction.partnerFee}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Status of Transfer" />
</f:facet>
<h:outputText value="#{transaction.statusOfTransfer}" />
</rich:column>
</rich:dataTable>
</div>
<h:panelGroup layout="block" id="container" style="overflow:scroll">
<rich:popupPanel id="popup" modal="true" autosized="true"
resizeable="false" domElementAttachment="form"
followByScroll="true">
<f:facet name="header">
<h:outputText value="Process Teller Transaction" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
x
</h:outputLink>
</f:facet>
<div id="container">
<fieldset class="add-form">
<legend>Add Account</legend>
<p class="choose-type">
<label>Account Type :</label> <select class="account-type"><option>Partner</option></select>
</p>
<p>
<label>Partner Name :</label><input type="text"
value="Enter Partner Name" class="partner-name" />
</p>
<p>
<label>Email Address :</label><input type="text"
value="Enter Email Address" class="email-fld" />
</p>
<p>
<label>Address :</label><input type="text"
value="Enter Postal Address" class="address-fld" />
</p>
<p>
<label>City :</label><select class="city-fld"><option>Select
City</option></select>
</p>
<p>
<label>Partner Limit :</label><select class="limit-fld"><option>Select
Limit</option></select>
</p>
<p>
<input type="submit" value="Create Account" class="search-btn" />
</p>
</fieldset>
</div>
</rich:popupPanel>
</h:panelGroup>
</h:form>
</div>
<div id="footer">
<div class="footer-content">
<div class="footer-liks">
<a href="#">Home</a> | <a href="#">Company Profile</a> | <a href="#">Partner's</a>
| <a href="#">Survey</a> | <a href="#">Jobs</a> | <a href="#">Press</a>
| <a href="#">Contact Us</a> <span>Copyright © 2012
CoinFling.com. All rights reserved. <a href="#">Privacy Policy</a>
- <a href="#">Terms of Service</a>
</span>
</div>
</div>
</div>
</h:body>
</html>
The popup shows. However, if the content is too large, then the scrollbars do not appear. How do I let the scrollbars always appear when it’s required?
Did you try to set a style on the div?
If that works, then the best would be to define a class.
Maybe you also have to explicitly define the size of the popup to get it to work properly.
Update:
The final solution was to use a
<h:panelGroup>..</h:panelGroup>block inside the<rich:popupPanel>without any additional style information. The<rich:popupPanel>already renders a div with theoverflow:autostyle around it’s content but the size calculation of the popup seems to fail if there is only plain html code inside it.