Hiding HTML elements from the SharePoint Dialog Box

Having worked with SharePoint branding for a while, one of the interesting items is how content pages will appear in the web interface for desktop interfaces vs how they appear in the pop-up dialog boxes. Ideally we want to be able to separate the presentation from the content, but also be able to reuse the same page whether it’s showing up as a full page or as a dialog box.

Anything you add to a custom SharePoint Master page will in general show up on the desktop view as well as the pop-up dialog boxes. The standard SharePoint 2010 method of hiding branding like logos and navigation from the SharePoint Dialog windows is to to tag your customized HTML elements with the “s4-notdlg” class. As an example, if you’re building out using BootStrap HTML and don’t want your headers and footers to appear in the dialog box, we can simply add s4-notdlg to the elements, so this:

<header>
<footer>
would become
<header class=”s4-notdlg”>
<footer class=”s4-notdlg”>

And that works fairly well in hiding your headers and footers. However, if you’re a big fan of keeping your presentation pages as clean as possible, you may not want to inject SharePoint specific classes into your pages, especially if these classes may change from version to version. For example, in SharePoint 2013 Microsoft has changed over to recommend that “ms-dialogHidden” is now their preferred method of hiding certain elements from the dialog box, so the above example, to be 2010 and 2013 compatible would now look like this:

<header class=”s4-notdlg ms-dialogHidden” >

<footer class=”s4-notdlg ms-dialogHidden” >

So now we’re stuck adding additional classes to our pages or webparts if we want them to not display in 2010 and 2013 dialog boxes. We may even need to go in and update them again when 2016 rolls around. And we’re stuck adding this class to every HTML element we don’t want to display in a dialog box. Surely there must be a better way?  When we look at the sourcecode of a page where you’ve passed in the “?IsDlg=1” querystring, you may notice an interesting thing, it adds the class “ms-dialog” to the HTML element of the page:

<html class=”ms-dialog” >

So SharePoint is very helpfully tagging the HTML element of the page with the ms-dialog class, telling us this content page is meant to be displayed as a dialog box.

Knowing this, we can create a CSS style that uses a descendent selector where the ms-dialog class is the parent and the HTML element (or class, identifier, etc.) is the child. Then all we have to do is set the display to none, like so:

.ms-dialog header,

.ms-dialog footer,

.ms-dialog .classToHide,

.ms-dialog #idenitifierToHide {

display:none;

}

This allows you to create a somewhat future-proof and somewhat platform independent (granted, this is SharePoint so we can only do so much) style. As you flesh out your pages and need to create a new element that needs to be hidden during the dialog box, you can just update the CSS statement without having to update your master page/page layouts/content pages.

Since we also know that the .ms-dialog is created using the QueryString “?IsDlg=1” this also allows us some additional creative branding ideas where we can further brand any child elements under the ms-dialog class as well, and hopefully future proof our work against additional class changes in the SharePoint ecosystem.