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...

Read More