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

Image1.png

 

The issue: the styles of the page on the background

image2.png

 

 

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];}
           }
           return(false);
        }
        
        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" />');
        }
    })();
</script>

 

 

Search the for the Main css in master page

Image3.png

 

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

Image4.png

 

Remove or Comment the main css reference

Image5.png

 

Refresh page and open again the Dialog box

Image6.png

 

 

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

Have more questions? Submit a request

Comments

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