Background page is scrolling but not the popup Modal

Question

There is a link in the input form to a popup window to pickup subject categories. The popup window (modal) is a long list but it is not scrolling. If I am trying to scroll then the input form is scrolling and not the popup window. The popup window is moving up with the input form. I want the popup window to scroll, so that I can go through the list of 'subject categories' to select. I am trying to modified this open source software code for my local use.

    function(resultingHtml){
    //retrieve the dialog box
    var $Result = $('<div></div>').html(resultingHtml);
    var mainDialogDivision = $Result.find('div[id^=aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_]');
     $('body').append($(mainDialogDivision[0]));
     var vocabularyDialog = $('div#aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_' + vocabularyIdentifier);
                    vocabularyDialog.dialog({
                        autoOpen: true,
                        overflow: scroll,
                        height: 450,
                        width: 650,
                        modal: true,
                        title: $Result.find('title').html()
                    });

Answer 1

You should be able to accomplish this using CSS. Adding style overflow:auto to the main modal element should allow you to scroll through all the subject categories.

You don't mention which DSpace theme you are using, so I assume you are using theme Mirage (the default DSpace theme), then adding the following CSS to the style.css file of your theme should solve your scrolling problem:

.ui-dialog.ui-widget.ui-widget-content 
{
    overflow: auto
}