Override MS CSS in SharePoint Online Modal Form

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.

Cannot do inline - the element in question is out-of-the-box SharePoint

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.

???

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>

Select allOpen in new window

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

Hope this clarifies.

Best regards,

MV

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...

I'm trying to explain that Line 2 is procedurally generated by SharePoint, not by me. I cannot make changes to this line.

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...

How can I add inline CSS to HTML that is generated by SharePoint?

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...

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.

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. (Click on image to show in larger version.)

Good luck...

You're referring to:

<style>
.ms-dlgTitleBtns {
    margin-top: -10px;
    margin-right: -18px;
    height: 30px;
    float: right;
}
</style>

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

Select allOpen in new window

Has no effect :(

Inline would be:

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

Select allOpen in new window

just to clarify the term.

There's no way for me to do that.

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?

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

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...

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

Select allOpen in new window

Thanks for the help!

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