rich:popupPanel always show scrollbars
Question
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?
1 answers
solution1
3 ACCPTED 2012-10-23 13:28:47
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show bean values in rich:popupPanel
Show rich:popupPanel on click of rich:tab
rerender part of rich:popupPanel
Equivalent of RichFaces 4 <rich:popupPanel> for RichFaces 3
rich:tooltip does not work in rich:popupPanel
validation and rich: popupPanel don't work
Richfaces <a4j:ajax> and <rich:popupPanel> “conflict”
<rich:popupPanel buttons not working in JSF Project
Keeping a rich:popupPanel open after page change
How to invoke managed bean action in rich:popupPanel
Related Tags