You are visiting the High Monkey blog archive. Posts prior to 2016 may not meet accessibility standards. Please visit our current blog area at https://www.highmonkey.com/blog to view accessibility compliant blog posts published since January 1, 2016.

How to: Remove custom master page elements from modal dialogue popup screens in SharePoint 2010

Written By: Virgil Carroll
Posted: 1/26/2012

During the build phase of a recent client project of ours, we ran into an unexpected issue with the SharePoint 2010 modal dialogue popup windows. After building a beautiful master page layout, we were taken back to see that certain elements from the site master page design were being displayed in the dialogue popup for list items (new, edit, view).

As you can see from the screenshot below, these elements were unnecessary and to be quite honest flat out ruined the layout. Why in the world would someone want to add an item that hasn't even been created yet to their favorites list? They wouldn't. And we don't want them to try.

(image)

After a bit of Googling, I discovered that the "fix" for this solution was simply to code master pages with the dialogue popups in mind. Microsoft was clever enough to give us an OOB CSS class in SharePoint named "s4-notdlg".

This class can be applied to your HTML elements (in your master page) that you don't want to display in your dialogue popups. This can be used to hide anything from custom headers, custom navigation, custom footers, to any other elements that you notice interfering with your dialogue popups. See our example below.

(image)

After a few div class edits, here's our result.

(image)

As you can see, the intrusive navigation elements are no longer present on the dialogue popup screen.

So there you have it, the solution is simple: If you don't want a custom element displayed in the dialogue popup, just add the CSS class "s4-notdlg" to your HTML element class.

Happy building!

Reference: http://sharepoint.jsturges.com/2011/07/hide-custom-header-elements-from-modal-popup-windows/

Chad's Bio Coming Soon!

More About Virgil

Virgil Carroll is the owner and president of High Monkey – based in Minneapolis Minnesota. Virgil also wears the multiple ‘hats’ of Principle Human Solutions Architect and SharePoint Architect.

Virgil is one of those rare individuals who can dive deep into technical topics while speaking clearly to the business owners of a project and never forgetting that the end user experience has the highest priority. He calls it using both sides of his brain. Virgil is passionate about leveraging technologies ‘out of the box’ as much as possible with a focus on the strategic use of content to create websites that deliver the right content to the right audience on the right device at the right time. Virgil brings high energy, an ironic wit, and a sense of grounded perspective whenever he speaks to an audience. Virgil regularly speaks at conferences and user groups throughout the United States and occasionally in Europe.

Posted: 1/26/2012 12:00:00 AM by | with 0 comments
Filed under: