12

I'm using a jquery UI dialog to have users accept a Terms & Conditions popup where the content is too long to fit in the popup's height. So a scrollbar appears when the dialog pops up, but it opens with the scrollbar at the bottom.

This doesn't seem to be possible through the dialog options.

Anyone know of a way to get the dialog to open with the scrollbar at the top?

devjeff
  • 153
  • 1
  • 4
  • Do you have any form elements (input, button, etc.) at the bottom of the scrollpane? Because the dialog has some issues with the focussing of such elements. A workaround is to attach an input at the top in the dialogs markup and remove that with the dialog's open callback. Maybe the issue is related to [this question](http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox). – Manuel Leuenberger Mar 15 '12 at 18:48

1 Answers1

21

Like commented above you might have an element at the bottom of the dialog's content that initially receives focus, which causes the scroll bar to scroll to that element when the dialog opens. You can try the workaround in the comment, which should work if the problem is indeed caused by a focus issue. Alternatively, you can manually scroll the dialog's content to the top. You can accomplish this by specifying an open callback and scrolling the dialog's content to the top position in there, like so:

    $("#dialog").dialog({
        open: function () {
            $(this).scrollTop(0);
        }
    });
Bojin Li
  • 5,769
  • 2
  • 24
  • 37
  • Thanks. Both approaches work great. Seems like a bug in jqueryUI, unless I'm missing *why* you'd want to set focus to the first input element by default. – devjeff Mar 16 '12 at 16:53
  • This was bothering me. The default seems to open to an input or at least toward the bottom. Any information provided at the top of the dialog is lost or must be scrolled to view. It would make sense to open at the top of the dialog box and allow the user to scroll down. Unfortunately, $(this) didn't work and neither did calling the same selector used for the dialog('open') since I use autoOpen: true option. Instead, I set $('body').scrollTop(0); as the dialog box opens at the top of the page on load. – nwolybug Sep 17 '15 at 18:54