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">
<head>
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 {
display:none;
}
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 {
display:none;
}
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
Thanks
Tesfaye Gari
@tesfayegari | tesfaye.gari@gmail.com | tgari@mtmconsultinggroup.com
Leave a Reply
You must be logged in to post a comment.