When opening a DialogBox the page styles are changed, when using IE9.

This issue was reported only when using Internet Explorer 9.

The Styles are changed on the page when the dialog box opens changing the view-port and changes the way the media queries should behave on the page.


Normal page



The issue: the styles of the page on the background




To fix this we need to make same changes on the master pages in use in the site.

  1. Open SharePoint Designer;
  2. Click at "All Files"  on the vertical menu;
  3. Browse "_catalogs > masterpage";
  4. Search for the master pages of your theme (uses the theme name);
  5. Edit the master page in use on the site, do Check Out on the file;
  6. Paste the script to fix the issue below of the initialization of jQuery;
  7. Change the css name and path on the script (change [THEMENAME] for the name of the theme);
  8. Remove or Comment the original main css reference (You could also put the existing css references below of the script to keep the css load order);
  9. Save and Check In the master page;
  10. Refresh page with CTRL+F5 to reload the browser cache.


CODE to use: 

<script type="text/javascript">
    (function () {
        var queryStringAccessor = function (variable) {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
        var isDlgValue = queryStringAccessor("IsDlg");
        if (isDlgValue) {
            document.write('<link rel="stylesheet" type="text/css" href="/_layouts/1033/STYLES/[THEMENAME]Package/[THEMENAME].css?mode=dialog" />');
        } else {
            document.write('<link rel="stylesheet" type="text/css" href="/_layouts/1033/STYLES/[THEMENAME]Package/[THEMENAME].css?mode=normal" />');



Search the for the Main css in master page



Paste the script code and Change [THEMENAME] for the name of the theme



Remove or Comment the main css reference



Refresh page and open again the Dialog box




Reference: https://responsivesharepoint.codeplex.com/discussions/441680

Have more questions? Submit a request


Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk