InputTextArea text overflow

Question

I have a small problem with the primefaces inputTextArea. If the text is longer than the assigned panel height the text overflows behind my next panel. Once I click into the textarea the problem goes away but when viewing the page it just looks ugly as you can see in the image below.

here is my xhtml code:

<!-- **************************** 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>

Is there any code I can add in to the inputTextArea that will stop the text spilling out of the panel? I'm using Eclipse kepler, Glassfish4.0, Google Chrome

Thanks Thanks

Answer 1

Solved it! But just in case someone else ever has the same problem here is what I did. I edited the code as follows:

<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 ******************************* -->

I added a scroll panel inside the main panel itself then tweaked the height and width so that it would be flush inside.

more information on scroll panels can be found here:

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