SharePoint 2010 customizations and the modal dialog

I blogged on this once before, but I just found the text part posted from 12/29/2009. So I am posting it again with updates.

When creating a custom master page with SharePoint 2010 you will run into issues.  First one: you find that the modal dialog (pop-up) is using some, or all, of your custom master page branding.

How does this happen? This happens when you have set your system master page to use your custom master page. The site master page is used for publishing/content pages and the system master page is used by all the forms and view pages of the site.

You don’t have these options (unless publishing is turned on) when you are using a team site or blog site, so your custom master page will also be used by the System Master Page.

What are my options?

One workaround is just not using your custom master page as the system master page (also known as the default, application _layouts).

There are times when you will use your custom master page in the system master pages, like team sites,  blogs or any other number of reasons.  When this page is customized using fixed widths, background colors and images, etc., it also changes the look and feel of your modal (pop-up) boxes.

Using the .s4-notdlg

You can use the .s4-notdlg class. Randy Drisgill created a blog post dealing with Custom Master pages and Dialog Boxes on using the CSS class called s4-notdlg, this is a good workaround when you don’t want large blocks to show – like the header/title row, breadcrumb, left nav area, and footer/copyright.  The .s4-notdlg renders a display none.

Using the .ms-dialog

Lets say you create a custom master page and you have a wrapper that uses a background image with a color:   .mywrapper {background: url(“bg.gif”) repeat-y left top #f8f8f8; }.

This wrapper is also outside the #s4-workspace and the #s4-bodycontainer, if you use the the .s4-notdlg class – everything on your page will disappear in the modal dialog box.

Using .ms-dialog before the class that is causing issues and you can reverse the effects:
.ms-dialog .mywrapper { background-image: none; background-color: transparent;}

Now our modal dialog box looks normal.

Thanks for reading, and please let me know if this post has helped.

, , , , ,

  • Ajit

    Very good information. I am facing same issue. I have applied custom master page to team site and whenever i try to add a new item to a list the modal pop up box is not showing all the fields as it is getting compressed by the branding and the custom master page is coming up inside it as well. Is there any way not to apply the custom master page to the system pages in team site? I tried it through code but it doesn’t work.