Primefaces Chat outputPanel не отображает полосу прокрутки

Question

У меня возникла проблема с демонстрацией Primefaces Chat из витрины 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> 

Любые подсказки о том, что я делаю неправильно?

Спасибо и с наилучшими пожеланиями!

Answer 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);