Share via

SharePoint 2013 and the chrome control

  • Article

I’ve been going through the new features in SharePoint 2013 – as most of us have been – and the other day I was working with the new chrome control. As you likely know by now, SharePoint 2013 introduces a new app model. I won’t go into detail on the new app model in this post, but along with creating new apps, you may need a way to chrome your app so that it has the same look and feel as the hosting web from which it has been launched.

You can find out more about the chrome control, provided via SP.UI.Controls.js, and how to use it here. As I followed the demo on this page in my own lab environment I was not getting the desired results. My page was being rendered with a mangled interface such as this:

clip_image001

After working with it for a while I sent out a call for help to my peers and the response was to check IE developer tools (F12) and verify the Document Mode. In my case it was set to IE7. After using the dev tools to change it to IE8 or higher, then the chrome rendered properly:

image

So my next question was how to make this change programmatically and the response was to use one of the following in the HTML page:

  • <!DOCTYPE html>
  • <meta http-equiv="X-UA-Compatible" content="IE=8">

 

Since I’m following the demo from MSDN I looked more closely and noticed that I was indeed already using <!DOCTYPE html>. As it turns out the problem was actually within my IE zones. In my lab I had added my domain (contoso.com) to the Intranet Zone. IE will by default render the Intranet Zone sites in IE7 compatibility, refer to the following IE blog:

https://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx.

So, in summary, in order to use the chrome control in your SharePoint 2013 apps, you will need to verify that the sites are not being rendered in IE7 compatibility mode.

Comments

  • Anonymous
    April 18, 2014
    Thanks for this.I wasted so much time to understand what the heck is wrong!