Primefaces Chat outputPanel 不显示滚动条答案

【问题标题】：Primefaces Chat outputPanel displays no scrollbarPrimefaces Chat outputPanel 不显示滚动条
【发布时间】：2013-06-05 15:51:11
【问题描述】：

我遇到了来自 Primefaces 展示的 Primefaces 聊天演示的问题。 outputPanel 组件不像展示演示中那样显示滚动条。下面是我的代码和截图：

<h:head>       
    <script type="text/javascript">
        function handleMessage(data) {
            var chatContent = $(PrimeFaces.escapeClientId('form:public'));
            chatContent.append(data + '<br />');

            //keep scroll  
            chatContent.scrollTop(200);   <----------- have tried "chatContent.height()"
        }
    </script> 
</h:head>

<h:body>
            <p:growl id="growl" showDetail="true" />  
            <h:form id="form">  
                <p:fieldset id="container" legend="UserChat" toggleable="true">  
                    <h:panelGroup rendered="#{chatView.loggedIn}">  
                        <h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">

                                <p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs" />  

                            <p:dataList id="users" var="user" value="#{chatView.users}" styleClass="usersList">
                                <f:facet name="header">  
                                    Users  
                                </f:facet>  
                                <p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">  
                                    <f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />  
                                </p:commandButton>  
                                #{user}  
                            </p:dataList>  
                        </h:panelGrid>  

                        <p:separator />  

                        <p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />  
                        <p:spacer width="5" />  
                        <p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>  
                        <p:spacer width="5" />  
                        <p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />  
                    </h:panelGroup>  

                    <h:panelGroup rendered="#{not chatView.loggedIn}" >  
                        Username: <p:inputText value="#{chatView.username}" />  

                        <p:spacer width="5" />  
                        <p:commandButton value="Login" actionListener="#{chatView.login}" update="container"   
                                         icon="ui-icon-person" />  
                    </h:panelGroup>  

                </p:fieldset>  

                <p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">  
                    <h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">  
                        <p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />  
                        <p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />  

                        <p:spacer />  
                        <p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />  
                    </h:panelGrid>  
                </p:dialog>  

            </h:form>  

            <p:socket onMessage="handleMessage" channel="/chat" autoConnect="true" widgetVar="subscriber"/>  
        </h:body>

关于我做错了什么的任何线索？

谢谢和最好的问候！

【问题讨论】：

标签： primefaces scroll scrollbar panel output

【解决方案1】：

问题可能是你没有指定chatlogs css 类，你应该添加如下：

<style type="text/css">
  .chatlogs {
    height: 210px !important;
    max-height: 210px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
 }
</style>

如果你想滚动到底部，你可以试试：

chatContent.scrollTop(chatContent[0].scrollHeight);

【讨论】：