Override MS CSS in SharePoint Online Modal Form

Michael Vasilevsky
Michael Vasilevsky used Ask the Experts™
on
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);
}

Open in new window


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;
}

Open in new window


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;
}

Open in new window

in my CSS and the following in my JS but both seem to be ignored:
$(function() {	

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

Open in new window


Has anybody run into this? Any suggestions?

Thank you,

MV
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
Try inline css on your myform.aspx. Seems to be a timing issue with loading. Inline is bad practice, but it might be a quick and dirty fix.
Michael VasilevskySolutions Architect

Author

Commented:
Cannot do inline - the element in question is out-of-the-box SharePoint
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
Screenshot shows that the file is ../SiteAssets/myForm.aspx

Why can't you open in SPD and add in-line css direct on page or via CEWP? I see it is SPO, but you should still have access, at least based on the path shown.

???
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Michael VasilevskySolutions Architect

Author

Commented:
Yes I'm opening myForm.aspx using showModalDialog, which puts the .aspx page in a model dialog form and adds a out-of-the-box SharePoint title and close button procedurally:

<div class="ms-dlgTitle">
	<span id="dlgTitleBtns" class="ms-dlgTitleBtns">
		<a id="DlgCloseed307380-3a21-4edc-bef5-4e5458949a22" class="ms-dlgCloseBtn" title="Close dialog" href="javascript:;" accesskey="C">
			<span style="padding:8px;height:16px;width:16px;display:inline-block">
				<span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust">
					<img src="/_layouts/15/images/fgimg.png?rev=44" alt="Close dialog" style="left:-0px !important;top:-645px !important;position:absolute;" class="ms-dlgCloseBtnImg">
					</span>
				</span>
			</a>
		</span>
		<h1 title="Timesheet" class="ms-dlgTitleText ms-accentText ms-dlg-heading" id="dialogTitleSpan" style="width: 950px;">Timesheet</h1>
	</div>

Open in new window


I'm not able to alter this outside of messing with layouts/masterpages.

Hope this clarifies.

Best regards,

MV
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
For testing, why not create a copy of myform.aspx and call it myform02.aspx. Call is as you now call myform.aspx.  Add what you need to line 2 of the file.

("margin-right","0)

Not sure what role the master page or layout page would play here. Inline css, as this would be, is always the last to be applied. If this works with your test file, do it with the live file.

Good luck...
Michael VasilevskySolutions Architect

Author

Commented:
I'm trying to explain that Line 2 is procedurally generated by SharePoint, not by me. I cannot make changes to this line.
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
Yes, of course line 2 comes from SharePoint, and part of what it does is it gets the styling from core.css (maybe a different name in SPO) and applies it. What I am saying is that you can override that styling by adding your own css in-line. It doesn't matter what line 2 does as far as styling, because can override what it applies with your own styling.  

Good luck...
Michael VasilevskySolutions Architect

Author

Commented:
How can I add inline CSS to HTML that is generated by SharePoint?
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
Looking at your code, it appears that you are calling a file named  "/SiteAssets/myForm.aspx"

You add your inline code to that page, which you should have access to since it is in the SiteAssets library. That way, when the page is rendered, your inline css will be the last css applied and override whatever SharePoint wants to do to it.

I could be all wrong, and if so, sorry to waste your time, but this seems like a file you can modify, and that includes adding your own css (stlying) to it.

Hope that helps...
Michael VasilevskySolutions Architect

Author

Commented:
Yes myForm.aspx is a form that I can edit, but it does not include the HTML for the dialog header that I posted previously. The header code is added by SharePoint. Therefore I cannot add inline styling, right?

I see my options as trying to overwrite via my CSS file, or with JavaScript, but neither of those worked, as detailed in my original question.
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
It is hard to say without knowing your exact situation. Here is a sample file from the 14 hive, (I know different version.) I have not tested this, but this inline is how I would try:

Sample Inline CSS Sample - Untested, probably not totally accurate, but points in a direction that it might work.
Sample Inline CSS Sample - Untested, probably not totally accurate, but points in a direction that it might work. (Click on image to show in larger version.)

Good luck...
Michael VasilevskySolutions Architect

Author

Commented:
You're referring to:
<style>
.ms-dlgTitleBtns {
    margin-top: -10px;
    margin-right: -18px;
    height: 30px;
    float: right;
}
</style>

Open in new window

?
That's internal style sheet, not inline CSS. I did try that, as indicated in my original post:

.ms-dlgTitleBtns {
    margin-right: 0px !important;
}

Open in new window

Has no effect :(
Michael VasilevskySolutions Architect

Author

Commented:
Inline would be:
<span id="dlgTitleBtns" class="ms-dlgTitleBtns" style="margin-right: 0px;">

Open in new window


just to clarify the term.

There's no way for me to do that.
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
It is terminology - when css is added as I showed, and viewed in the source code rendered, the style is "inline", but that is just what I read to call it. It could be something different. Yes, the code shown was the wrong code, it could be like this.

<style>
.ms-dlgTitleBtns {
    margin-right: 0px;
}
</style>

Also, after looking at your code again, it appears to be attached to the span with the id "dlgTitleBtns", not to the class which may override the span styling. Could that be the issue?
Michael VasilevskySolutions Architect

Author

Commented:
My code snips above only reference the class ms-dlgTitleBtns. Where do you see me selecting the id dlgTitleBtns?
Michael VasilevskySolutions Architect

Author

Commented:
I think I know the issue: myForm.aspx runs in an iFrame, so CSS and JS within it cannot affect the parent. I'm going to have to do some research to see how to handle this situation...
SharePoint AED
Distinguished Expert 2018
Commented:
Sounds like you found the problem possibly. That's great!

The line below:

<span id="dlgTitleBtns" class="ms-dlgTitleBtns" style="margin-right: 0px;">

shows that there is an ID for the span names "dlgTitleBtns", which inherits from the class "ms-dlgTitleBtns". The code style="margin-right: 0px;" does apply to the span and all code within that span, until an items is associated with the class "ms-dlsTitleBtns"  which will overwrite the style placed in the span. (If that is the case. To know for sure I would test this with dev tools in a browser to see exactly what is happening.)

Have a good one..
Michael VasilevskySolutions Architect

Author

Commented:
I found a solution by adding the CSS change to the parent page function:

function openTSDialog(myID) { 
	SP.UI.ModalDialog.showModalDialog({ 
		url: currentSite + "/SiteAssets/myForm.aspx?ID=" + myID, 
		title: "Timesheet", 
		allowMaximize: false, 
		showClose: true, 
		width: 1020,  
        	height: 600, 
		dialogReturnValueCallback: refreshCallback
	}); 
	$("#dlgTitleBtns").css("margin-right","0");
}	//openTSDialog

Open in new window


Thanks for the help!
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
You're welcome. Sorry I couldn't help faster, but glad you got a solution.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial