So you have a nice custom master page and you are applying it all over your new SharePoint 2010 site, what happens when one of the new dialog boxes is loaded on the page (like when you click to edit a list item)? Guess what… your branded master page with logo and footer and everything will also apply to the much smaller modal dialog box that SharePoint pops up, see the screenshot for an example:
How do we fix this? Microsoft had the good sense to give us an easy CSS class to add to our html elements that we don’t want showing in dialog boxes, simply add s4-notdlg to the class, like this:
<div class="customFooter">
would become
<div class="customFooter s4-notdlg">
For my design, I added this to the top, header, navigation, and footer div’s in my master page, and BAZINGA I get dialog boxes that have only a hint of my custom branding:
Thanks Randy. Just what I was looking for.
Randy,
i used the remove s4-workspace to do fixed width for a site and noticed that the dialog boxes in Firefox no longer auto re-size have you run into this?
Thanks
Keep ID=”s4-workspace” and add class=”s4-nosetwidth” if you are doing a fixed width design.
Yes sometimes the dialog resizing can be a problem, watch your main container widths and paddings. You may need a .ms-dialog + bodyclass style that overrides just when the dialog is using it.
thanks Randy Drisgill but exactly where do i need to use s4-notdlg class link in which div?
class=”s4-notdlg” goes in every div that you don’t want to show in a dialog box. Common places would be the logo, navigation, and footer.
Thanks for the tip Randy, much appreciated!
-Mo
Randy, can you check this out in firefox? Cory is right – firefox does not resize properly. If you have a solution, please let me know.
I might need to see a screenshot of whats going on. I have seen instances where you need to add extra CSS to get rid of padding and widths from custom branding that are applying to dialogs. I’m not sure if this is what you mean buf for that I add CSS like this (customBody is my main page container):
.ms-dialog .customBody {
margin:0px !important;
width:auto !important;
height:auto !important;
padding: 0px !important;
}
I have created a custom master page. the problem I am having in my dialogs are I am missing the images in the top right to close or resize. I cant figure out where to make the change to have them visible again. Any help would be greatly appreciated
I used the class=”s4-notdlg” in those divs but I am getting dialog boxes that are empty, just have just the background of my custom page, no content in them.
I looked at the padding, height and width of my wrapper (container) and there is nothing that seems to interfere:
.wrapper {
width: 1060px;
background: #fff;
margin: 0 auto;
}
I don’t know why I am getting empty dialog boxes. Can you help?
Marie
Keep in mind, using a custom master in SP2010 will kill people picker fields and lookup columns in lists. Since the custom master will render in IE9, the switch back to IE8 for NewForm.aspx and EditForm.aspx does not happen. It’s a known bug which renders the use of custom master pages useless in SharePoint.
Hi Randy,
Could you give me some help, with the following issue, please?
I’m applying a custom master page to subsite. After applied it, all forms used by libraries, lists give errors. (DispForm.aspx, EditForm.aspx, NewForm.aspx). I’d would to like use the default sharepoint master page for this forms (for example V4.master)
I’ll appreciate any comment.
Regards,
Adrian
Thanks a lot. This was what I was looking for. Helped me a lot.
How does this work in a V4 master that is mostly customized by an attached CSS file?
I used a V4 master to create a system master customized by css. The modal window is now very wide. When I used “s4-notdlg” in the body container, the site went to full width and the scroll bar didn’t work. I tried using your modal script here but it didn’t work.
.ms-dialog #s4-bodyContainer {
margin:0px !important;
width:auto !important;
height:auto !important;
padding: 0px !important;
}
I used a width of 60% and it worked and also used .ms-dialog #s4-v4body also allowed me to remove the background image and go with white. Resolved.
thanks