SharePoint 2013: Modal Dialog Position and Scrolling Issue with Lengthy Page

Introduction

Sharepoint pages with height more than 1100 can face this issue where Sharepoint popup appears at the top of page independent of location of call.

Background

We have come across an issue with SharePoint modal dialog, while working with a lengthy page where due to some lengthy content, vertical scroll bar was coming. We developed one web part form, which we have added at the center of the vertical screen. From that web part, we can open a SharePoint Asset picker to select the image which opens a model dialog. The functionality was working as expected but we found UI level issues.

Using the Code

Problem

When we try to launch SharePoint ‘Modal Dialog’ from the bottom of the huge scrolled page, we are not able to see the dialog and only see the bluer screen (overlay). The actual model dialog is getting opened at the top of the page and because of the current scroll position which is somewhere in between the screen or at the bottom, we are not able to see the popup.

Solution

The model dialog location is set by CSS class on the top of the screen, we need to override the CSS class to change the property. The name of the class is ms-dlgContent. We can add the following CSS class in either master page or respective CSS.

// CSS to add in you custom css at the end Or in master page
.ms-dlgContent
{
      position:fixed !important;
}

Suggestion

Please take backup of your Master page or CSS before any change.

Note

Please leave your comment if it helps.