本文介绍了rich:popupPanel始终显示滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的JSF表单包含一个弹出面板.代码在这里:
My JSF form contains a popup panel. The code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml" xmlns:ui="java.sun/jsf/facelets" xmlns:h="java.sun/jsf/html" xmlns:a4j="richfaces/a4j" xmlns:rich="richfaces/rich" xmlns:f="java.sun/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. 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?
推荐答案您是否尝试在div上设置样式?
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.
更新:
最终的解决方案是在<rich:popupPanel>中使用<h:panelGroup>..</h:panelGroup>块，而没有任何其他样式信息. <rich:popupPanel>已经在其内容周围呈现了overflow:auto样式的div，但是如果其中仅包含纯HTML代码，则弹出窗口的大小计算似乎会失败.
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.
更多推荐
rich:popupPanel始终显示滚动条
发布评论