IE 9 Modal Issue

Apr 26, 2013 at 3:46 PM
In IE 9 I notice the following scenario occurs:
  1. Click the new document icon
  2. The modal dialog pops up
  3. As soon as I move the mouse over the modal dialog the underlying page reverts to the "under 979 pixels view"
Has anyone else experience this and is there a workaround?

Thank you so much for your effort. This is an incredible project.
Coordinator
Apr 27, 2013 at 9:37 PM
Hi Jason,

Very interesting issue. Are you working with SP 2010 or SP 2013?

Eric
Apr 29, 2013 at 12:53 PM
Hi Eric,

My apologies - I should have mentioned that this is SP2013. The issue does not occur with IE 8 or Chrome.

Jason
Jun 12, 2013 at 11:44 AM
I can confirm that this happens for me also...
Coordinator
Jun 12, 2013 at 6:36 PM
Hi,

Unfortunately I have been unable to duplicate this issue. I tested by adding a document in multiple different document libraries in our development environment in ie8, 9 and 10. None of these showed the behavior when I moused over or even dragged the modal around. Is there a particular OOTB document library or a specific type of custom library that is causing this issue? Can you provide any screenshots with at least the path url provided?

If anyone else solved this issue, please post the updated css so that we can include it in the project.

Eric
Sep 27, 2013 at 6:21 PM
Edited Sep 27, 2013 at 6:21 PM
Hey Eric,

I can confirm that this is still an issue (Bootstrap 2 - SharePoint 2013 - IE9). Please see the attached image. It looks like the media query's are firing when you hover over the dialog box.

Please note If you have the dev toolbar open you won't have an issue!

I encounter this issue when trying to add an document or a folder to a document library...

Thanks so much in advance and congrats on the great branding SharePoint 2013 and responsive design book!

Image
Oct 18, 2013 at 6:25 AM
Just wondering if anyone has found a resolution for this problem at all? Does anyone know if this is fixed using Bootstrap 3?
Dec 20, 2013 at 4:25 AM
Edited Dec 20, 2013 at 4:28 AM
Same happening to me with the foundation package for SharePoint 2013. As soon as a modal dialog opens (editing links in the left menu, adding folders, adding files)
the media directive thinks you're running a very small screen and the whole page adjusts to the responsive version. Very frustrating, as you only get the stuff back once you resize the window.

Error appears on IE 9 on a Windows 7 machine.

I can confirm that this issue does not appear in IE10 on WS2012
Dec 20, 2013 at 7:06 AM
I've found that if you use a css file with a different name for the dialog, the problem seem to go away. Its like it recalculates the media queries for the dialog but then applies the calculations to all styles in all iframes where there is a match?

I ended up using javascript:

// pseudo script
if (isDialog()) {
document.write( <load portal.css?dialog=1> )
} else {
document.write( <load portal.css?dialog=0> )
}

the query string on the portal.css was enough for me. You could also just create a copy of the css (e.g. portal-dialog.css) and then load that one when rendering inside a dialog.

Hope that helps someone!
Jun 4, 2014 at 10:48 PM
Hi Everyone,

I know this is kind of an old thread, but has anyone found a solution or has more details on SaltyDH's approach?

Thanks!
Jun 5, 2014 at 11:44 AM
Hi There

There's probably a bunch of ways this can be achieved, I chose javascript. Essentially I used the following javascript code inside my masterpage file.
    <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="SiteAssets/responsive.css?mode=dialog" />');
            } else {
                document.write('<link rel="stylesheet" type="text/css" href="SiteAssets/responsive.css?mode=normal" />');
            }
        })();
    </script>
You should use this process for any of your CSS files that include CSS media queries.
Hope that helps someone, would love some feedback here and happy to field and further questions.

Cheers.
Jun 5, 2014 at 6:45 PM
Hi Salty_dh, thanks for your help! Finally got it to work. I forgot to remove the existing hard-coded reference to responsive.css so that did the trick :)
Jul 16, 2014 at 9:00 PM
Hi Salty_dh, I was stuck with similar problem when using Responsive CSS for our Portal. Thank you for the Script to work around the issue. Right now we are using two different CSS files. But in you solution you are using the same CSS file with a Query String Parameter. I tried to find how that Query String Parameter can be used inside the CSS to determine which styles to apply and which not to, but I couldn't find it anywhere. If you can explain or provide an example, that would be great.

Thanks.
Coordinator
Jul 21, 2014 at 11:01 PM
Hi,

You cannot use a querystring var in CSS, nor can you add any true logic processing to css. You can use a little bit of js though to get a similar effect.

The following is pseudo js code with simple css.
if (queryStringVar.pageType === 'system')
   document.documentElement.className += document.documentElement.className + ' systemPage';
else
   document.documentElement.className += document.documentElement.className + ' normalPage';
queryStringVar.pageType is made up, you will have to use a jQuery library or the like to get your query string vars, but say we have the url http://localhost/pages/default.aspx?pageType=system. If the above js code was executed, your <html> top tag will have a new class name added to it, i.e. systemPage. (equivalent to <html class="systemPage">)

Now let's assume you have the following css.
#banner { display: block;}
.systemPage #banner {display: none;}
.normalPage #banner {background-color: #fff;}
In the above example, if you had a div container with an id = "banner", then by default this would be displayed, but then if the querystring var pageType equaled system then the banner would be hidden.

I use the technique all of the time to indirectly add logic controls to css.

Eric