Databases
StackOverflow2013
Postsdbo
POAutoScrolling in the JSF/Primefaces page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutoScrolling in the JSF/Primefaces page
    text
    copied!<p>I am using primefaces and JSF2.0 to built page.</p> <p>In the page I have two Panels when I click on the button "Click-me" one panel one, it rendered the second panel in the same page, what I want is when I click the button "Click-me" page should also scroll down automatically and should bring the Second Panel Header in front of the user, Currently user need to manually scroll down to see the second panel. Code is as below</p> <p>XHTML Page</p> <pre><code>&lt;h:form id="form1"&gt; &lt;p:panel header="Panel One" id="PanelOne" &gt; &lt;h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" &gt; &lt;h:outputText value="First Input Field Panel One" &gt;&lt;/h:outputText&gt; &lt;p:inputTextarea rows="20" cols="80"&gt;&lt;/p:inputTextarea&gt; &lt;h:outputText value="Second Input Field Panel One" &gt;&lt;/h:outputText&gt; &lt;p:inputTextarea rows="20" cols="80"&gt;&lt;/p:inputTextarea&gt; &lt;h:outputText value="" &gt;&lt;/h:outputText&gt; &lt;p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}"&gt; &lt;/p:commandButton&gt; &lt;/h:panelGrid&gt; &lt;/p:panel&gt; &lt;p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}"&gt; &lt;h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" &gt; &lt;h:outputText value="First Input Field Panel Two" &gt;&lt;/h:outputText&gt; &lt;p:inputTextarea rows="20" cols="80"&gt;&lt;/p:inputTextarea&gt; &lt;h:outputText value="Second Input Field Panel Two" &gt;&lt;/h:outputText&gt; &lt;p:inputTextarea rows="20" cols="80"&gt;&lt;/p:inputTextarea&gt; &lt;/h:panelGrid&gt; &lt;/p:panel&gt; &lt;/h:form&gt; </code></pre> <p>Managed Bean is as below</p> <pre><code>@ManagedBean @ViewScoped public class AutoScrollBean { private boolean renderPanelTwo; public boolean isRenderPanelTwo() { return renderPanelTwo; } public void setRenderPanelTwo(boolean renderPanelTwo) { this.renderPanelTwo = renderPanelTwo; } public void clickAction () { System.out.println("Inside Method"); setRenderPanelTwo(true); } </code></pre> <p>}</p> <p><strong>EDIT:</strong></p> <pre><code>&lt;p:focus /&gt; </code></pre> <p>By using above focus command, curosr goes to the first input field and that input field is shown to the user after auto scroll, But I want to show the user from Panel Header NOT from the first input field.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload