locked
Displaying Modal Dialog box SharePoint 2010 RRS feed

  • Question

  • I have been having the worst trouble with Dialog boxes in SharePoint 2010. I have a fixed width design on my master page. However whenever I open up a dialog, the form is cut off. As shown HERE.

    Below is the custom CSS:

    body {
    	background-color: #CCCCCC; /*background-image: url('bg.gif');*/;
    	background-repeat: repeat-x;
    	/*color: #FFFFFF;*/
    }
    /* hide body scrolling (SharePoint will handle) */
    body {
    	height: 100%;
    	overflow: hidden;
    	width: 100%;
    }
    .customPageWidth {
    	width: 1060px;
    	height: 100%;
    	margin: auto;
    	/*padding-top: 10px;*/
    }
    .customPagePadding {
    	padding: 0px 30px;
    }
    .customBody {
    	background-color: white;
    	min-height: 420px;
    	padding-top: 20px;
    	padding: 20px 20px 40px;
    	width: 1018px;
    	overflow: auto;
    	border-color: #bbbbbb;
    	border-style: solid;
    	border-width: 0 1px;
    }
    .customLogo {
    	background-image: url('logo.png');
    	background-repeat: no-repeat;
    	height: 130px;
    	width: 164px;
    	top: 28px;
    }
    .customHead {
    	background-image: url(logo_bg.png);
    	background-repeat: repeat-x;
    	height: 130px;
    	width: 1060px;
    	background-color: transparent;
    }
    /* fix margins when dialog is up */
    .ms-dialog .customPageWidth, .ms-dialog .customBody {
    	margin-left: 0 !important;
    	margin-right: 0 !important;
    	min-height: 0 !important;
    	min-width: 0 !important;
    	width: auto !important;
    	height: auto !important;
    	background-color: white !important;
    	background-image: none !important;
    	padding: 0px !important;
    	overflow: inherit;
    }
    /* dialog bg */
    .ms-dialog body {
    	background-color: white;
    	background-image: none;
    }
    /* fix dialog padding */
    .ms-dialog .s4-wpcell-plain {
    	padding: 4px;
    }
    /* fix field edit mode width problems */
    .ms-formfieldvaluecontainer {
    	overflow: hidden;
    }
    /* fix the blog font size */
    .ms-PostBody {
    }
    body #s4-leftpanel /*Quick Launch Uncomment Display: none; to hide everything*/ {
    	background: #CCCCCC;
    	color: gray;
    	overflow: auto;
    /*display: none; */
    }
    /*Style for top navigation bar*/
    .s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {
    	background-image: url('topbar.PNG');
    	color: #00004E;
    	font-weight: bold;
    }
    /*Left Panel sub items*/
    .s4-ql ul.root ul > li > a {
    	color: #00004E;
    	/*color: black;*/
    	/*background-image:url('topbar2.PNG');*/
    }
    .s4-ca /*Quick Launch Margin, uncomment to hide*/ {
    	/*margin-left: 0px;*/ 
    overflow: hidden;
    }
    /*Code to create rounded corners*/
    .customBottom {
    	background-image: url(round_bottom.png);
    	background-repeat: no-repeat;
    	height: 30px;
    	display: block;
    	padding-bottom: 20px;
    }
    .customTop {
    	background-image: url(round_top.png);
    	background-repeat: no-repeat;
    	height: 30px;
    	display: block;
    }
    /*Top this is the same style as top nav but used on the bottom copyright div*/
    .top_nav_style {
    	background-image: url('topbar.png');
    	font-weight: bold;
    	color: #00004E;
    }
    .s4-tn {
    	white-space: nowrap;
    }
    /*Top Menu individual links "Home", "USAKA", "Contractor Information", etc...*/
    .s4-tn li.static > .menu-item {
    	/*color:#3b4f65;*/
    	white-space: nowrap; /*border:1px solid transparent;*/;
    	padding: 4px 10px;
    	display: inline-block;
    	height: 15px;
    	vertical-align: middle;
    	background-image: url('topbar.png'); /*color:maroon;*/ /*color:#555555;*/;
    	color: #00004E;
    	/*background-color: fuchsia;*/
    }
    .s4-tn li.static > .menu-item:hover {
    	background-image:url('topbar2.PNG');
    	color: white;	
    	text-decoration: none;
    	border-color: red;
    }
    /*Hide arrows for top level site with flyouts*/
    .menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background {
    	padding-right: 0px;
    	background-image: none;
    }
    /*Acutal menu item*/
    .s4-tn li.dynamic > .menu-item {
    	display: block;
    	padding: 4px 10px;
    	white-space: nowrap;
    	font-weight: normal;
    	background-color: #CCCCCC;
    	width: 200px; /*color:black;*/;
    	color: #00004E;
    	border-width: thin;
    	border-color: black;
    }
    /*Menu item hover over*/
    .s4-tn li.dynamic > a:hover {
    	font-weight: normal;
    	color: #FFFFFF; /*background-image:url('topbar2.PNG');*/;
    	background-color: #00004E;
    	border-bottom-color: red;
    }
    /*Remove menu item hover delay*/
    .s4-tn li.hover-off > ul {
    	display: none;
    }
    /*Style of web part header*/
    .ms-WPHeaderTd {
    	background-image: url('topbar.png');
    	padding: 0px 4px;
    	display: block;
    	width: 100%;
    }
    /*Style of web part menu option*/
    .ms-WPHeaderTdMenu {
    	background-image: url('topbar.png'); /*border-color:#CCCCCC;*/ /*padding:4px;*/;
    	border: 0;
    }
    /*Style of web part menu option hover*/
    .ms-WPHeaderTdMenu:hover {
    	background-image:url('topbar2.png');
    	/*color: #00004E;*/ /*padding:4px;*/;
    	border-color: navy;
    }
    /*Style of web part header selection*/
    .ms-WPHeaderTdSelection {
    	background-image: url('topbar.png');
    	border: 0;
    	/*border-color:#CCCCCC;*/
    }
    /*Style of webpart title*/
    .ms-WPTitle {
    	display: block; /*color:#555555;*/;
    	color: #00004E;
    	font-weight: bold;
    }
    /*Style webpart title link visited*/
    .ms-WPTitle a:visited {
    	display: block; /*color:#555555;*/;
    	color: #00004E;
    	font-weight: bold;
    }
    /*Style webpart title*/
    .ms-WPTitle a {
    	display: block; /*color:#555555;*/;
    	color: #00004E;
    	font-weight: bold;
    }
    /*start of css from stackoverflow.com*/
    .ms-toolbar {
    	font-family: verdana;
    	font-size: 8pt;
    	text-decoration: none; /*[ReplaceColor(themeColor:"Hyperlink")]*/;
    	color: #0072BC;
    }
    /*Style for search*/
    .searchField {
    	float: left;
    	padding-top: 10px;
    }
    /* IE7 Adjustments */
    .searchField table.s4-wpTopTable {
    	width: 200px;
    }
    /*Hide title breadcrumb. Didnt work*/
    .s4-titletext {
    	display: none !important;
    }
    

    And here is the master page:

    <%@ Master language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="MUISelector" src="~/_controltemplates/MUISelector.ascx" %>
    <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="<%$Resources:wss,language_value %>" dir="<%$Resources:wss,multipages_direction_dir_value %>" runat="server" __expr-val-dir="ltr">
    
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <!-- robots -->
    <SharePoint:RobotsMetaTag runat="server"/>
    <!-- page title - overridden by asp:content on pages or page layouts -->
    <title runat="server"><asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">SiteName</asp:ContentPlaceHolder>
    </title>
    <!-- favicon -->
    <SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/sitename/favicon.ico"/>
    <!-- all OOTB css -->
    <SharePoint:CssLink runat="server" Version="4"/>
    <SharePoint:Theme runat="server"/>
    <!-- page manager interacts with script and the sharepoint object model -->
    <SharePoint:SPPageManager runat="server"/>
    <!-- unified logging service -->
    <SharePoint:ULSClientConfig runat="server"/>
    <!-- identifies to scripting elements that this is a v4 master page. required for scrolling? -->
    <script type="text/javascript">
    		var _fV4UI = true;
    	</script>
    <!-- load SharePoint javascript -->
    <SharePoint:ScriptLink language="javascript" Defer="true" runat="server"/>
    <style type="text/css">
    /* fix scrolling on list pages */
    #s4-bodyContainer {
    	position: relative;
    }
    /* hide body scrolling (SharePoint will handle)
    		body {
    			height:100%;
    			overflow: auto !important;
    			background-color: #CCCCCC;
    		}*/
    /* popout breadcrumb menu needs background color for firefox */
    .s4-breadcrumb-menu {
    	background: #F2F2F2;
    }
    /* if you want to change the left nav width, change this and the margin-left in .s4-ca */
    body #s4-leftpanel {
    }
    /* body area normally has a white background */
    .s4-ca {
    	background: transparent none repeat scroll 0 0;
    			/*margin-left:155px;*/
    }
    </style>
    <!-- link to our custom css -->
    <SharePoint:CssRegistration name="/Style Library/CSS_homepage.css" After="corev4.css" runat="server"/>
    <!-- javascript to override the active-x message in ie 
    		// See http://blog.drisgill.com/2010/02/removing-name-activex-control-warning.html for more info
    		// Remove if the IM pressence icons are needed in SharePoint
    	-->
    <script type="text/javascript">
    		function ProcessImn(){}
    		function ProcessImnMarkers(){}	
    	</script>
    <!-- additional header delegate control -->
    <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
    <!-- additional header placeholder - overridden by asp:content on pages or page layouts -->
    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
    	<!-- microsoft says these should always be inside the head tag. -->
    	<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server" />
    		<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server" />
    	</head>
    
    	<body scroll="no" onload="javascript:_spBodyOnLoadWrapper();">
    
    	<form runat="server" onsubmit="return _spFormOnSubmitWrapper();">
    		<input name="ctl00$ctl18$ctl00" type="hidden" value="http://kwajweb.smdck.smdc.army.mil" />
    		<!-- handles SharePoint scripts -->
    		<asp:ScriptManager id="ScriptManager" runat="server" enablepagemethods="false" enablepartialrendering="true" enablescriptglobalization="false" enablescriptlocalization="true" />
    		<!-- controls the web parts and zones -->
    		<WebPartPages:SPWebPartManager runat="server"/>
    		<!-- this control is more navigation for mysites, otherwise it is empty -->
    		<SharePoint:DelegateControl runat="server" ControlId="GlobalNavigation"/>
    		<!-- ===== Begin Ribbon ============================================================ -->
    		<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
    			<div id="s4-ribboncont">
    				<!-- ribbon starts here -->
    				<SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile="">
    		
    			<!-- ribbon left side content starts here -->
    			<SharePoint:SPRibbonPeripheralContent
    				runat="server"
    				Location="TabRowLeft"
    				CssClass="ms-siteactionscontainer">
    					
    					<!-- site actions -->
    					<span class="ms-siteactionsmenu" id="siteactiontd">
    					<SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
    						PrefixHtml=""
    						SuffixHtml=""
    						MenuNotVisibleHtml="&amp;nbsp;"
    						>
    						<CustomTemplate>
    						<SharePoint:FeatureMenuTemplate runat="server"
    							FeatureScope="Site"
    							Location="Microsoft.SharePoint.StandardMenu"
    							GroupId="SiteActions"
    							UseShortId="true"
    							>
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
    								Text="<%$Resources:wss,siteactions_editpage%>"
    								Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
    								ImageUrl="/_layouts/images/ActionsEditPage.png"
    								MenuGroupId="100"
    								Sequence="110"
    								ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);"
    								/>
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_TakeOffline"
    								Text="<%$Resources:wss,siteactions_takeoffline%>"
    								Description="<%$Resources:wss,siteactions_takeofflinedescription%>"
    								ImageUrl="/_layouts/images/connecttospworkspace32.png"
    								MenuGroupId="100"
    								Sequence="120"
    								/>
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreatePage"
    								Text="<%$Resources:wss,siteactions_createpage%>"
    								Description="<%$Resources:wss,siteactions_createpagedesc%>"
    								ImageUrl="/_layouts/images/NewContentPageHH.png"
    								MenuGroupId="200"
    								Sequence="210"
    								UseShortId="true"
    								ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('Page')) { OpenCreateWebPageDialog('~site/_layouts/createwebpage.aspx') }"
    								PermissionsString="AddListItems, EditListItems"
    								PermissionMode="All" />
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreateDocLib"
    								Text="<%$Resources:wss,siteactions_createdoclib%>"
    								Description="<%$Resources:wss,siteactions_createdoclibdesc%>"
    								ImageUrl="/_layouts/images/NewDocLibHH.png"
    								MenuGroupId="200"
    								Sequence="220"
    								UseShortId="true"
    								ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('DocLib')) { GoToPage('~site/_layouts/new.aspx?FeatureId={00bfea71-e717-4e80-aa17-d0c71b360101}&amp;ListTemplate=101') }"
    								PermissionsString="ManageLists"
    								PermissionMode="Any"
    								VisibilityFeatureId="00BFEA71-E717-4E80-AA17-D0C71B360101" />
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreateSite"
    								Text="<%$Resources:wss,siteactions_createsite%>"
    								Description="<%$Resources:wss,siteactions_createsitedesc%>"
    								ImageUrl="/_layouts/images/newweb32.png"
    								MenuGroupId="200"
    								Sequence="230"
    								UseShortId="true"
    								ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('Site')) { STSNavigate('~site/_layouts/newsbweb.aspx') }"
    								PermissionsString="ManageSubwebs,ViewFormPages"
    								PermissionMode="All" />
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
    								Text="<%$Resources:wss,siteactions_create%>"
    								Description="<%$Resources:wss,siteactions_createdesc%>"
    								MenuGroupId="200"
    								Sequence="240"
    								UseShortId="true"
    								ClientOnClickScriptContainingPrefixedUrl="if (LaunchCreateHandler('All')) { STSNavigate('~site/_layouts/create.aspx') }"
    								PermissionsString="ManageLists, ManageSubwebs"
    								PermissionMode="Any" />
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_ViewAllSiteContents"
    								Text="<%$Resources:wss,quiklnch_allcontent%>"
    								Description="<%$Resources:wss,siteactions_allcontentdescription%>"
    								ImageUrl="/_layouts/images/allcontent32.png"
    								MenuGroupId="300"
    								Sequence="302"
    								UseShortId="true"
    								ClientOnClickNavigateUrl="~site/_layouts/viewlsts.aspx"
    								PermissionsString="ViewFormPages"
    								PermissionMode="Any" />
    							 <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditSite"
    								Text="<%$Resources:wss,siteactions_editsite%>"
    								Description="<%$Resources:wss,siteactions_editsitedescription%>"
    								ImageUrl="/_layouts/images/SharePointDesigner32.png"
    								MenuGroupId="300"
    								Sequence="304"
    								UseShortId="true"
    								ClientOnClickScriptContainingPrefixedUrl="EditInSPD('~site/',true);"
    								PermissionsString="AddAndCustomizePages"
    								PermissionMode="Any"
    							/>							
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_SitePermissions"
    								Text="<%$Resources:wss,people_sitepermissions%>"
    								Description="<%$Resources:wss,siteactions_sitepermissiondescriptionv4%>"
    								ImageUrl="/_layouts/images/Permissions32.png"
    								MenuGroupId="300"
    								Sequence="310"
    								UseShortId="true"
    								ClientOnClickNavigateUrl="~site/_layouts/user.aspx"
    								PermissionsString="EnumeratePermissions"
    								PermissionMode="Any" />
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
    								Text="<%$Resources:wss,settings_pagetitle%>"
    								Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
    								ImageUrl="/_layouts/images/settingsIcon.png"
    								MenuGroupId="300"
    								Sequence="320"
    								UseShortId="true"
    								ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"
    								PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
    								PermissionMode="Any" />
    							<SharePoint:MenuItemTemplate runat="server" id="MenuItem_CommitNewUI"
    								Text="<%$Resources:wss,siteactions_commitnewui%>"
    								Description="<%$Resources:wss,siteactions_commitnewuidescription%>"
    								ImageUrl="/_layouts/images/visualupgradehh.png"
    								MenuGroupId="300"
    								Sequence="330"
    								UseShortId="true"
    								ClientOnClickScriptContainingPrefixedUrl="GoToPage('~site/_layouts/prjsetng.aspx')"
    								PermissionsString="ManageWeb"
    								PermissionMode="Any"
    								ShowOnlyIfUIVersionConfigurationEnabled="true" />
    						</SharePoint:FeatureMenuTemplate>
    						</CustomTemplate>
    					 </SharePoint:SiteActions></span>
    			
    			 <!-- global navigation dhtml popout menu -->
    			 <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server">
    					<SharePoint:PopoutMenu
    						runat="server"
    						ID="GlobalBreadCrumbNavPopout"
    						IconUrl="/_layouts/images/fgimg.png"
    						IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
    						IconOffsetX=0
    						IconOffsetY=112
    						IconWidth=16
    						IconHeight=16
    						AnchorCss="s4-breadcrumb-anchor"
    						AnchorOpenCss="s4-breadcrumb-anchor-open"
    						MenuCss="s4-breadcrumb-menu">
    						<div class="s4-breadcrumb-top ">
    							<asp:Label runat="server" CssClass="s4-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
    						</div>
    						<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
    							<SharePoint:ListSiteMapPath
    								runat="server"
    								SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
    								RenderCurrentNodeAsLink="false"
    								PathSeparator=""
    								CssClass="s4-breadcrumb"
    								NodeStyle-CssClass="s4-breadcrumbNode"
    								CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
    								RootNodeStyle-CssClass="s4-breadcrumbRootNode"
    								NodeImageOffsetX=0
    								NodeImageOffsetY=353
    								NodeImageWidth=16
    								NodeImageHeight=16
    								NodeImageUrl="/_layouts/images/fgimg.png"
    								RTLNodeImageOffsetX=0
    								RTLNodeImageOffsetY=376
    								RTLNodeImageWidth=16
    								RTLNodeImageHeight=16
    								RTLNodeImageUrl="/_layouts/images/fgimg.png"
    								HideInteriorRootNodes="true"
    								SkipLinkText="" />
    						</asp:ContentPlaceHolder>
    					</SharePoint:PopoutMenu>
    				</asp:ContentPlaceHolder>
    				
    			<!-- save button at top of ribbon -->
    			<SharePoint:PageStateActionButton id="PageStateActionButton" runat="server" Visible="false" /></SharePoint:SPRibbonPeripheralContent>
    			
    			<!-- ribbon right side content starts here -->
    			<SharePoint:SPRibbonPeripheralContent
    				runat="server"
    				Location="TabRowRight"
    				ID="RibbonTabRowRight"
    				CssClass="s4-trc-container ">
    				
    				<!-- GlobalSiteLink0 delegate - the variation selector / shows nothing by default otherwise -->
    				<SharePoint:DelegateControl runat="server" ID="GlobalDelegate0" ControlId="GlobalSiteLink0" />
    				
    				<!-- This is where the new search will be placed in the ribbon-->
    				<div class="searchField" id="s4-searcharea">
        			<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
            		<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
        			</asp:ContentPlaceHolder>
    				</div>
    
    				<!-- Welcome / Login control -->
    				<div class="s4-trc-container-menu">
    					 <div>
    						<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
    						</wssuc:Welcome>
    						<!-- MultiLingual User Interface menu -->
    						<wssuc:MUISelector ID="IdMuiSelector" runat="server"/>						
    					</div>
    				</div>
    			
    				<!-- GlobalSiteLink2 delegate default shows nothing -->
    				<SharePoint:DelegateControl ControlId="GlobalSiteLink2" ID="GlobalDelegate2" Scope="Farm" runat="server" />
    				
    				<!-- link to launch developer dashboard if its activated by admin -->
    				<span>
    					<span class="s4-devdashboard">
    					<Sharepoint:DeveloperDashboardLauncher
    						ID="DeveloperDashboardLauncher"
    						NavigateUrl="javascript:ToggleDeveloperDashboard()"
    						runat="server"
    						ImageUrl="/_layouts/images/fgimg.png"
    						Text="<%$Resources:wss,multipages_launchdevdashalt_text%>"
    						OffsetX=0
    						OffsetY=222
    						Height=16
    						Width=16 />
    					</span>
    				</span>
    			</SharePoint:SPRibbonPeripheralContent>
    	 </SharePoint:SPRibbon>
    				<!-- end main ribbon control --></div>
    			<!-- dynamic notification area -->
    			<div id="notificationArea" class="s4-noti">
    			</div>
    			<!-- old navigation delegate? -->
    			<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    			<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate">
    		  </SharePoint:DelegateControl>
    	</asp:ContentPlaceHolder>
    			<!-- top web part panel -->
    			<div id="WebPartAdderUpdatePanelContainer">
    				<asp:UpdatePanel ID="WebPartAdderUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
    			<ContentTemplate>
    				<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
    			</ContentTemplate>
    			<Triggers>
    				<asp:PostBackTrigger ControlID="WebPartAdder" />
    			</Triggers>
    				</asp:UpdatePanel>
    			</div>
    		</div>
    		<!-- ===== End Ribbon and other Top Content ============================================================ -->
    		
    		<!-- ===== Start Scrolling Body Area ============================================================ -->
    		<!-- these two div id's are used to setup the main scrolling page area, they should stay if you are sticking the ribbon to the top -->
    		<div id="s4-workspace" class="s4-nosetwidth">
    			<!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% -->
    			<div id="s4-bodyContainer" class="">
    				<!--Dont place s4-notdlg here or on the line above RDP-->
    				<!-- id="mso_contentdiv" required, helps SharePoint put the web part editing pane in the main body on the right, you can move the ID if needed -->
    				<div id="MSO_ContentDiv" runat="server">
    					<div class="customPageWidth">
    						<div class="customTop s4-notdlg"></div>
    						<!--<div class="customPagePadding s4-notdlg">-->
    						<!-- link back to homepage, SiteLogoImage gets replaced by the Site Icon, you can hard code this so that its not overridden by the Site Icon or even remove -->
    						
    						<div class="customHead s4-notdlg">
    							<div class="customLogo">
    								<SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/">
    									<SharePoint:SiteLogoImage LogoImageUrl="/Style Library/logo.png" AlternateText="Back to Home" ToolTip="Back to Home" runat="server"/>
    								</SharePoint:SPLinkButton>
    							</div>										
    						</div>
    						<!-- top navigation area -->
    						<div class="">
    							<!-- top navigation publishing data source -->
    							<PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/>
    							<!-- top navigation menu (set to use the new Simple Rendering) -->
    						</div>
    						<!-- page editing status bar -->
    						<div class="">
    							<div id="s4-statusbarcontainer" class="">
    								<div id="pageStatusBar" class="s4-status-s1">
    								</div>
    								<div class="top_nav_style s4-notdlg">
    									<SharePoint:AspMenu ID="TopNavigationMenuV4" EncodeTitle="true" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="4" SkipLinkText="" CssClass="s4-tn">
    					</SharePoint:AspMenu></div>
    							</div>
    						</div>
    						<div class="customBody">
    							<!-- styles needed to have left nav to the left of the main area -->
    							<div id="s4-leftpanel" class="s4-notdlg">
    								<!-- The quick launch bar / left navigation -->
    								<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
    				<PublishingNavigation:PortalSiteMapDataSource
    					ID="SiteMapDS"
    					runat="server"
    					EnableViewState="false"
    					SiteMapProvider="CurrentNavigation"
    					StartFromCurrentNode="true"
    					StartingNodeOffset="0"
    					ShowStartingNode="false"
    					TrimNonCurrentTypes="Heading"/>			
    				<SharePoint:AspMenu
    					ID="CurrentNav"
    					EncodeTitle="false"
    					runat="server"
    					EnableViewState="false"
    					DataSourceID="SiteMapDS"
    					UseSeparateCSS="false"
    					UseSimpleRendering="true"
    					Orientation="Vertical"
    					StaticDisplayLevels="2"
    					MaximumDynamicDisplayLevels="4"
    					CssClass="s4-ql" 
    					SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/>			
    			</asp:ContentPlaceHolder>
    								<!-- The small menu attached Quick Launch bar. Used only on very specific pages -->
    								<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server" />
    								</div>
    								<!-- s4-ca is the main body div -->
    								<div class="s4-ca">
    									<div class="">
    										<!-- links for I like it and Tags and Notes -->
    										<!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons -->
    										<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
    									</div>
    									<div class="">
    										<!-- page title RDP Commented out to get rid of "HOME"-->
    										<!--<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />-->
    										</div>
    										<!-- place a table around this to handle funky markup in _Layouts/areacachesettings.aspx (if you want) -->
    										<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
    											<div>
    												<!--Dont place a s4-notdlg here RDP-->
    												<!-- page content loads from the pages and pages layout -->
    												<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
    												</div>
    											</div>
    										</div>
    										<!-- footer - this is purely optional -->
    										<div class="s4-notdlg customPageWidth" style="clear: both;">
    											<div class="top_nav_style customPagePadding s4-notdlg">
    												© Copyright 2010 USAKA-WEB </div>
    										</div>
    										<div class="customBottom s4-notdlg"></div>
    										<!-- the developer dashboard can be turned on by administrators and shows debuging and performance info for the page -->
    										<div id="DeveloperDashboard" class="ms-developerdashboard">
    											<SharePoint:DeveloperDashboard runat="server"/>
    										</div>
    									</div>
    								</div>
    							</div>
    							<!-- ===== End scrolling body area with these two previous div's ============================================================ -->
    							<!-- The form digest security control used to for security validation on forms -->
    							<asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">
    	<SharePoint:FormDigest runat="server"/>
    </asp:ContentPlaceHolder>
    							<!-- ===== Hidden Placeholders ============================================================ -->
    							<asp:Panel visible="false" runat="server">
    	
    	<!-- Usually shows the tree view but do not remove because of issue with changing views in the ribbon in publishing sites -->
    	<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
    	</SharePoint:DelegateControl>
    	
      <!-- ===== These placeholders don't output anything very often OOTB ========== -->
    	<!-- The navigation menu that is inside the top navigation bar. -->
    	<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server"/>
    	<!-- The top navigation where GlobalNavigationSiteMap is contained. Gets overridden by default. V4 uses it to change the top nav -->
    	<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server"/>
    	<!-- The top of the Quick Launch menu. -->
    	<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server"/>
    	<!-- The bottom of the Quick Launch menu. -->
    	<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server"/>
    	<!-- The placement of the data source used to populate the left navigation bar. -->
    	<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />
    	<!-- The date picker used when a calendar is visible on the page. -->
    	<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />
    	<!-- The top section of the left navigation bar. -->
    	<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server" />	
    	<!-- used to override the global sitemap? -->
    	<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" />
    	
      <!-- ===== These placeholders does not appear as part of the 2010 UI but must be present for backward compatibility. ========== -->
    	<!-- The name of the site where the current page resides. -->
    	<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server"/>	
    	<!-- Page icon in the upper-left area of the page -->
    	<asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server"/>
    	<!-- Left border of the title area -->
    	<asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server"/>
    	<!-- mini console - supplementary buttons for pages like the wiki / history / incoming links -->
    	<asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server"/>
    	<!-- Right margin of the title area -->
    	<asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server"/>
    	<!-- Left border of the title area -->
    	<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server"/>	
    	<!-- The width of the left navigation area -->
    	<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/>
    	<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server"/>
    	<!-- Border element for the main page body -->
    	<asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server"/>
    	<!-- Right margin of the main page body -->
    	<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" />
    	
    </asp:Panel>
    							<!-- Handle Search "enter" key and back button -->
    							<input type="text" name="__spDummyText1" style="display: none;" size="1" />
    							<input type="text" name="__spDummyText2" style="display: none;" size="1" />
    						</div>
    					</form>
    					<!-- extra form for some instances -->
    					<asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server" />
    						<!-- warn users of old browsers that they need to upgrade -->
    						<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>
    						<!-- Starter Master Page by Randy Drisgill (http://blog.drisgill.com) - Oct. 7, 2010 -->
    						<!-- Remove this credit if you want, but if you leave it in I will appreciate it! -->
    
    				</body>
    
    			</html>
    

     

    Tuesday, November 23, 2010 9:37 PM

Answers

  • The code I posted above, I just took out as an experiment. Looks like dialog windows are working as they should now.
    • Marked as answer by rondawg92313 Friday, March 18, 2011 2:46 AM
    Friday, March 18, 2011 2:07 AM

All replies

  • Hi,

     Open CoreV4.css and find this element BODY #s4-bodyContainer add "width : 500px;" and try.

    Before:

    BODY #s4-bodyContainer
    {
     min-width:760px;
    }
    
    

    After

    BODY #s4-bodyContainer
    {
     width:500px;
    }
    
    

    Try changing this value until the content fits in the window. I recommend to use Internet Explorer 8 with Developer Tools.

    Open site in IE then open the dialog. Press F12 to get Developer tools window. Click Arrow button in that window and point the element in the site. Now it'll show the HTML code and CSS. Just click the CSS style and change. On the fly it'll change and you can see preview. If it's fine then make the changes in Actual CSS.

    I've posted an article for this. Just Refer : http://geekswithblogs.net/venkatx5/archive/2010/11/24/how-to-change-look-and-feel-of-sharepoint-2010-sites.aspx


    Regards,
    Venkatesh R
    /* My Code Runs in Visual Studio 2010 */
    http://geekswithblogs.net/venkatx5/
    • Edited by Venkatx7 Wednesday, November 24, 2010 6:17 AM Reference URL Added
    Wednesday, November 24, 2010 4:05 AM
  • Please dont modify CoreV4.css directly, if you need to override styles defined there override them in a custom css instead of modifying the corev4.css directly, Modifying SharePoint files directly is unsupported and your farm will be in unsupported state until you backout your changes

     


    Microsoft Certified Master | SharePoint 2007
    Blog

    Wednesday, November 24, 2010 4:28 AM
  • Edit Custom.css

    Put following class in custom.css

    BODY #s4-bodyContainer
    {
     	width:500px !important;
    }

    This will resolve your issue.


    Muhammad Kamran Rafi
    kamran_rafi@hotmail.com
    SharePoint Developer
    Xelleration LLC
    Wednesday, November 24, 2010 9:12 AM
  • Hi,

    the problem with you modal dialogs is that the fixed size count for you modal dialogs too. To fix this issue the modal dialog has some extra css classes that will be rendered when a page is opened in a modal dialog.

    So the base class for modal dialog is ms-dialog and it rely on the html tag.

    <html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr" class="ms-dialog"> this is the HTML Tag renderd in modal dialog.

    To override the style of your default page with you just need to set the value for the

    .ms-dialog BODY #s4-bodyContainer{
           width: auto !important;
           min-width: 0px !important;
    }

    This must be set after your BODY s4-bodyContainer modification. As Venkatex2 Said don't overwrite corev4.css instead attach a custom css of your own.

    Hope this helps
    Kind regards Stefan



    You


    http://www.n8d.at/blog
    twitter: n8design
    MCTS - SharePoint / WSS Configuration and Development
    Wednesday, November 24, 2010 8:19 PM
  • This didn't work. Dialog box still behaved the same. And this made my layout not centered.
    • Proposed as answer by Hisham Nabil Thursday, January 6, 2011 2:27 PM
    Wednesday, November 24, 2010 8:46 PM
  • Hi,

    now i've done this on a new blank v4.master page and it worked:

    BODY #s4-bodyContainer
    {
        width:500px;
    /* Margin maintain to be centered s4-workspace can although be centered for older browser support */
        margin: auto;
    }
    .ms-dialog BODY #s4-bodyContainer{
         width: auto !important;
         min-width: 0px !important;
         margin: 8px;
    }

    regards Stefan


    http://www.n8d.at/blog
    twitter: n8design
    MCTS - SharePoint / WSS Configuration and Development
    Wednesday, November 24, 2010 9:18 PM
  • Hi Stefan,

     

    Im not using a blank v4.master. I'm using the publishing starter master page that Randy Drisgill has on Codeplex. Im also using a fixed width design.

     

    The suggestion above did not work.

     

    Wednesday, November 24, 2010 10:30 PM
  • Hi,

    if now tried to debug you master page and style sheets but there are more problems that just the Dialog box as far as i have seen. Randy's has really great article on msdn for real world designing master pages. Which can be found here: http://msdn.microsoft.com/en-us/library/gg430141.aspx

    Hope this helps.

    Kind Regards Stefan.

     


    http://www.n8d.at/blog
    twitter: n8design
    MCTS - SharePoint / WSS Configuration and Development
    Wednesday, November 24, 2010 11:12 PM
  • Hi Stefan,


    Thanks for trying to debug my masterpage. I still don't find any problems with the master page except for the Dialog problem. What other problems did you encounter with my masterpage on your end?

    Wednesday, November 24, 2010 11:58 PM
  • Hi,

    the most prolem i encountered is how you use the master page but you don't have done any css planning for you site and used the placeholder css that randy inserted. I mean it works but you need to test carefully every single function in sharepoint because some of the functionality might not work. But it depends on the use case you have with your master page. The safe way to create a new master page i use always v4.master. It works in any case and in most cases customisation is much quicker than start from scratch. I'm experienced in customisation on SharePoint since the 2003 version and the safe approach was never a failure.

    You should really check out the article i mentioned above. It's really great.

    But i've seen a lot of master pages from scratch that doesn't work. Especially if the designer is not much into sharepoint and know which place holder in which case is for what.

    Removing unwanted element or position them on other place was never a problem.

    But it's more a question of favor.

    kind regards Stefan.


    http://www.n8d.at/blog
    twitter: n8design
    MCTS - SharePoint / WSS Configuration and Development
    Thursday, November 25, 2010 12:41 AM
  • Hi,

     

    I didn't make the Master page from scratch. I used the master page from codeplex. We are in the process of downloading IE Developer Toolbar to better help troubleshoot our problem.

    Thank you again Stefan for the quick replies.

    Thursday, November 25, 2010 1:28 AM
  • Stefan,

    I just ended up setting the width to inherit on the class for ms-dialog. Shown below in bold...

     

    /* fix margins when dialog is up */
    .ms-dialog .customPageWidth, .ms-dialog .customBody {
    	margin-left: 0 !important;
    	margin-right: 0 !important;
    	min-height: 0 !important;
    	min-width: 0 !important;
    	width: inherit !important;
    	height: auto !important;
    	background-color: white !important;
    	background-image: none !important;
    	padding: 0px !important;
    	overflow: inherit;
    }

    This makes the modal window really wide. This is not the best solution but it doesnt chop off buttons as shown HERE.

    Thursday, November 25, 2010 3:36 AM
  • Hi,

    the codeplex or randys are masterpages without 90% of SharePoints default setup and default css classes attached. So they are from scatch reduced to the required content place holder on the master page.

    But your content in the light box is still choped off ?!?

    Kind regards Stefan

     


    http://www.n8d.at/blog
    twitter: n8design
    MCTS - SharePoint / WSS Configuration and Development
    Thursday, November 25, 2010 7:23 AM
  • Hi,

    The light box does not chop off now. But it does display the lightbox at the set width of 1060px.

    Saturday, November 27, 2010 2:51 AM
  • Hi,

     

    It is working for a majority of dialog boxes but some of the wider forms are cutting off the "cancel" button. Do you have any advice for tracking this down?

     

    Thanks

    Thursday, March 17, 2011 10:05 PM
  • If you are not discussing about Dialog master, I wud like to add about that :

    http://hiddensharepointfeatures.blogspot.com/2008/01/how-to-use-moss-dialogmaster-for-custom.html Its great to use in SP2010

     

     

    Thursday, March 17, 2011 10:25 PM
  • Johnny,

     

    I don't think this helps at all since we are using custom masterpage and hiding what we dont want to show up in Dialog window.

    Thursday, March 17, 2011 10:42 PM
  • Below is the current css code for displaying Dialog boxes

    /* fix margins when dialog is up */
    .ms-dialog .customPageWidth, .ms-dialog .customBody {
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: 0 !important;
        min-width: 660px !important; /*590px is set to min-width for weird
    tag <img width="590" height="1" alt=""
    src="/_layouts/images/blank.gif" complete="complete"/> */
        width: auto !important;
        height: auto !important;
        background-color: white !important;
        background-image: none !important;
        padding: 0px !important;
        overflow: inherit;
    }
    /* dialog bg */
    .ms-dialog body {
        background-color: white;
        background-image: none;
    }
    /* fix dialog padding */
    .ms-dialog .s4-wpcell-plain {
        padding: 4px;
    }
    .ms-dialog BODY #s4-bodyContainer
    {
        width: auto !important;
        min-width: 0px !important;
        margin: 8px;
    }

    Thursday, March 17, 2011 10:51 PM
  • Oh ok.

     

    Is that Master page specific to dialog masterpage or   is it a  common master page (application master or default master) ??

    Thursday, March 17, 2011 11:40 PM
  • I used Randy's custom master page from codeplex.
    Thursday, March 17, 2011 11:45 PM
  • The code I posted above, I just took out as an experiment. Looks like dialog windows are working as they should now.
    • Marked as answer by rondawg92313 Friday, March 18, 2011 2:46 AM
    Friday, March 18, 2011 2:07 AM
  • Hi,

     

    I am also having the width issue with the modal dialogs and my custom master page (fixed centered width).

     

    I started from the starter master page I found in codeplex and I adapted it to my design. Now the modal dialogs render width a fixed width and adding the horizontal scroll when the content of the dialog is wider than the fixed width.

    If I use the v4.master modal dialogs render well but not with my master page.

    Why is this happening?

    I analysed some of the post solutions but with no luck

    Can someone help me, please?

    Thanks

    Thursday, April 28, 2011 10:02 AM
  • Hi, I am having the same issues with dialog windows. 

    The only solution that I found whas to delete the css class "s4-pr s4-widecontentarea"

    form the div ID=s4-mainarea

    But this break the a lot of other stuff so It is a no-go

    Anyone has found a real solution for this?

    thanks

     

     


    Monday, June 6, 2011 3:31 PM
  • I was having the same problem.  If added the suggestion from Mr. Bauer from above where he said:

    • To override the style of your default page with you just need to set the value for the

      .ms-dialog BODY #s4-bodyContainer{
             width: auto !important;
             min-width: 0px !important;
      }

    It didn't work, UNTIL I added overflow:visible !important.  In the body #s4-bodyContainer setup, the overflow had been hidden.  Changing this parm did the trick for me (see below).

    Glen

    -------------------------------------------------------

    .ms-dialog body #s4-bodyContainer {
         overflow:visible !important;
         width:auto !important;
         min-width:0px !important;

    }

    Wednesday, August 3, 2011 6:32 PM