troubleshooting Question

Override MS CSS in SharePoint Online Modal Form

Avatar of Michael Vasilevsky
Michael VasilevskyFlag for United States of America asked on
JavaScriptCSSMicrosoft SharePoint
19 Comments1 Solution1701 ViewsLast Modified:
I'm generating a model form with the following code:

function openMyForm() { 
	SP.UI.ModalDialog.showModalDialog({ 
		url: currentSite + "/SiteAssets/myForm.aspx" 
		title: "My Form", 
		allowMaximize: false, 
		showClose: true, 
		width: 1000,  
        	height: 600, 
		dialogReturnValueCallback: refreshCallback
	}); 
}

function refreshCallback(dialogResult, returnValue) { 
	SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}

The problem is the close button is falling off the form, so to speak:

Model Form Layout Issue
The issue can be traced to the following CSS:
.ms-dlgTitleBtns {
    margin-top: -10px;
    margin-right: -18px;
    height: 30px;
    float: right;
}

If I set margin-right to 0px in-browser the close button is where it should be:
Desired Layout
The problem is I can't get this change to stick. I tried putting:
.ms-dlgTitleBtns {
    margin-right: 0px !important;
}
in my CSS and the following in my JS but both seem to be ignored:
$(function() {	

		$(".ms-dlgTitleBtns").css("margin-right","0");
		
	});

Has anybody run into this? Any suggestions?

Thank you,

MV
ASKER CERTIFIED SOLUTION
Walter Curtis
SharePoint AED
Join our community to see this answer!
Unlock 1 Answer and 19 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 19 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros