Override MS CSS in SharePoint Online Modal Form

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
LVL 11
Michael VasilevskySolutions ArchitectAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Walter CurtisSharePoint AEDCommented:
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.
0
Michael VasilevskySolutions ArchitectAuthor Commented:
Cannot do inline - the element in question is out-of-the-box SharePoint
0
Walter CurtisSharePoint AEDCommented:
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.

???
0
Determine the Perfect Price for Your IT Services

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

Michael VasilevskySolutions ArchitectAuthor 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
0
Walter CurtisSharePoint AEDCommented:
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...
0
Michael VasilevskySolutions ArchitectAuthor Commented:
I'm trying to explain that Line 2 is procedurally generated by SharePoint, not by me. I cannot make changes to this line.
0
Walter CurtisSharePoint AEDCommented:
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...
0
Michael VasilevskySolutions ArchitectAuthor Commented:
How can I add inline CSS to HTML that is generated by SharePoint?
0
Walter CurtisSharePoint AEDCommented:
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...
0
Michael VasilevskySolutions ArchitectAuthor 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.
0
Walter CurtisSharePoint AEDCommented:
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...
0
Michael VasilevskySolutions ArchitectAuthor 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 :(
0
Michael VasilevskySolutions ArchitectAuthor 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.
0
Walter CurtisSharePoint AEDCommented:
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?
0
Michael VasilevskySolutions ArchitectAuthor Commented:
My code snips above only reference the class ms-dlgTitleBtns. Where do you see me selecting the id dlgTitleBtns?
0
Michael VasilevskySolutions ArchitectAuthor 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...
0
Walter CurtisSharePoint AEDCommented:
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..
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael VasilevskySolutions ArchitectAuthor 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!
0
Walter CurtisSharePoint AEDCommented:
You're welcome. Sorry I couldn't help faster, but glad you got a solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.