rich:popupPanel always show scrollbars

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?

<h:panelGroup layout="block" id="container" style="overflow:scroll"> ... </h:panelGroup>

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 the overflow:auto style around it's content but the size calculation of the popup seems to fail if there is only plain html code inside it.