InputTextArea文本溢出

Question

我對primefaces inputTextArea有一個小問題。如果文本長於指定的面板高度，則文本會在我的下一個面板後面溢出。一旦我點擊進入textarea，問題就消失了，但是在查看頁面時，它看起來很醜，就像你在下面的圖片中看到的那樣。

這裏是我的XHTML代碼：

<!-- **************************** INITIAL DETAILS **************************** --> 
       <p:panel header="Initial Details" style="width:480px;height:300px;"> 
        <p:inplace emptyLabel="--empty--" id="ajaxInplaceInitialDetails" editor="true"> 
         <p:ajax event="save" listener="#{bigComplaintsDAO.handleEditSave}"   update=":messages" /> 

         <p:inputTextarea rows="10" cols="47" maxlength="5000" autoResize="false" 
          value="#{bigComplaintsDAO.selectedComplaintRow.initialdetails}" 
          required="true" label="text" queryDelay="750" minQueryLength="4" /> 
        </p:inplace> 
       </p:panel> 
       <br/> 
       <!-- **************************** ADD NEW NOTES ******************************* --> 
       <p:panelGrid columns="1" cellpadding="5" style="width:450px;height:200px;"> 


        <p:panel header="Add New Note"> 
         <h:outputText value="Subject: *" /> 
         <p:inputText id="subjectNew" 
          value="#{bigComplaintsDAO.newNoteSubject}" required="true" 
          label="Subject label"> 
          <f:validateLength minimum="2" /> 
         </p:inputText> 



         <p:inputTextarea id="bodyNew" rows="10" cols="47" maxlength="5000" 
          value="#{bigComplaintsDAO.newNoteBody}" required="true" 
          label="Body" queryDelay="750" minQueryLength="4"> 
         </p:inputTextarea> 
        </p:panel> 

        <p:commandButton value="Submit" 
         process="@this, subjectNew, bodyNew" 
         update=":messages, accordionPanelNotes, :messages" 
         actionListener="#{bigComplaintsDAO.addNewNote}" id="btnSubmit"> 
         <f:actionListener binding="#{bigComplaintsDAO.init()}" /> 
        </p:commandButton> 
       </p:panelGrid> 

是否有任何代碼，我可以添加到inputTextArea將停止文本溢出面板？ 我使用Eclipse開普勒，Glassfish4.0，谷歌Chrome

感謝 感謝

Answer 1

解決它！ 但是爲了防止別人遇到同樣的問題，我就是這樣做的。 我編輯的代碼如下：

<p:panel header="Initial Details" style="width:480px;height:300px;"> 
       <p:scrollPanel style="width:465px;height:255px"> 

        <p:inplace emptyLabel="--empty--" id="ajaxInplaceInitialDetails" editor="true"> 
         <p:ajax event="save" listener="#{bigComplaintsDAO.handleEditSave}"   update=":messages" /> 

         <p:inputTextarea rows="10" cols="47" maxlength="5000" autoResize="false" 
          value="#{bigComplaintsDAO.selectedComplaintRow.initialdetails}" 
          required="true" label="text" queryDelay="750" minQueryLength="4" /> 
        </p:inplace> 

       </p:scrollPanel> 
       </p:panel> 
       <br/> 
       <!-- **************************** ADD NEW NOTES ******************************* --> 

我添加了一個滾動面板主面板然後本身調整了高度和寬度，以便它是齊平的內部裏面。

上滾動面板

的更多信息可以在這裏找到：

http://primefaces-rocks.appspot.com/ui/scrollPanel.jsf