How to hide page elements from the SharePoint dialog box

By default, anything you add in your custom SharePoint master page will not only appear in the web interface, but will be passed through and appear in the pop-up dialog box that is used for so many functions in SharePoint 2010/2013/2016. Microsoft recommends adding the s4-notdlg CSS class to any HTML element that you don’t want to appear in the dialog box.  So for example:

 <div id="MyCustomElement" class="s4-notdlg">Wonderful goodness</div>

This works fine but it can get rather cumbersome to add this class to every element you want to stop from being passed through.  I suggest that you take a different approach. When you view the source code for a dialog box, the HTML element nested in the iFrame that creates the dialog box has the ms-dialog class applied.

<div class="ms-dlgFrameContainer">
  <iframe id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="http://sharepoint">
    <html class="ms-dialog">

Create a CSS style statement that uses a descendent selector identifier. Set the ms-dialog class as a parent and your custom identifier as the child. Set the display to none.

.ms-dialog #MyCustomElement {

Each time you create a new element that needs to be hidden from the dialog box display, you just need to update your CSS style statement.  There is no need to add an additional style to the HTML element in the master page/content page/page layout file.

.ms-dialog #MyCustomElement,
.ms-dialog .Header,
.ms-dialog .Footer  {

This same approach can be used for altering the display of an element in the dialog box.  Use the same descendent selector and change up the properties.

.Header {
   background: red;
.ms-dialog .Header {
   background: green;

Hope this is helpful for those of you working on branding of SharePoint 2016/2013/2010

Tesfaye Gari
@tesfayegari | |

Leave a Reply


901 S Highland St Room 314
Arlington, Virginia 22204
Phone: (240) 547-6851

About MTM

MTM Training and Consulting is started by a group of highly qualified and motivated Information Technology Professionals to help you boost your IT career, and your company's productivity
Read More