scrollTo inside a primefaces dialog

Question

I am looking for a way to scroll the scrollBar of a primefaces dialog to the top.

Use case: I am having a form inside a dialog and there are some input validation when the form submitted. If an error is detected on one of the input fields, a message should be displayed at the top of the dialog wich has a scrollbar.

Java actual code with no effect (no error on consols): // modifierUrgenceDelaiForm:exception is the clientID of the p:messages component RequestContext.getCurrentInstance().scrollTo("modifierUrgenceDelaiForm:exception");

Thanks for your help.

score 1 · Answer 1 · answered May 16 '16 at 15:43

1

Try putting this on your submitbutton:

<p:commandButton value="Submit" .... 
   oncomplete="if (args.validationFailed) {PF('dialogwv').content.scrollTop('0')}" />

answered May 16 '16 at 15:43

Jaqen H'ghar

4,305
2
14
26

Even better: just put it on the onshow of the dialog, or even override the dialog javascript on show function – Kukeltje May 16 '16 at 18:25
1

Yep... I thought I saw a 'dialog.show()' to in there... sorry ;-_ – Kukeltje May 17 '16 at 00:49

score 0 · Answer 2 · answered Feb 01 '16 at 17:22

var elm = $("#formId\\:componentId");
smoothScroll(elm);

Put below code in some js file and pass the id of component for which validation fails to scroll to that component. If you want the scroll goes in up everytime when validation fail then pass Id of some component that is there in top of dialog.

Please note that this is client side. So you need to pass Id which appear in your browser when you inspect element in browser.

Hope this will help you.

function smoothScroll(elm) {
    var startY = currentYPosition();
    var stopY = elmYPosition(elm);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 100);
    speed=speed+12;
   if (speed >= 20) speed = 20;
    var step = Math.round(distance / 50);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i=startY; i<stopY; i+=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }
}

Thanks for your reply, i 've seen answer [here](http://stackoverflow.com/questions/17722497/scroll-smoothly-to-specific-element-on-page). This works in a window (main view page), instead, in my case i want a scrollTo inside a dialog. The window.scrollTo(0, 0) does not work in this case because the dialog is independent from the main page i think.. — Chicov, Feb 02 '16 at 08:23

scrollTo inside a primefaces dialog

2 Answers2