Modal Dialog and CSS Question

Question

I'm a newbie at CSS but I'm working on a custom master page for SP2010.  I am trying to use CSS to set the top padding for the #s4-workspace to 140px on a normal page, 140px for a modal dialog where the ribbon is displayed, and 4px for a modal dialog where the ribbon is NOT displayed.

So I'm trying this:

body #s4-workspace {
    padding-top: 140px !important;
}
.ms-dialog .s4-ribbonrowhidetitle body #s4-workspace {
    padding-top: 5px !important;
}
.ms-dialog body #s4-workspace {
    padding-top: 140px !important;
}

The problem is in the modal dialogs.  No matter what, I always get the 140px padding.  Could anyone give me any suggestions?  If I need to post more info, please let me know.

Sincerely,

Glen

Answer 1

Glen,

Troubleshooting with CSS is very easy with Firefox-->Firebug extension. You can inspect all the elements in a page and change different CSS values right on the browser and evaluate the result simultaneously. 

Also following is the jQuery i used to check if the ribbon is present or not in a page. Just leaving this here if that would be helpful.

function ribbonCheck()
{
	if(jQuery("#s4-ribbonrow") == null) return;

	var shw = jQuery("#s4-ribbonrow").css("display");
	if(shw == 'none')
	{
		//ribbon not visible
	}
	else
	{
		//ribbon visible
	}
}

Answer 2

Paul,

Thanks for your reply.  Will this code work in the scope of the modal dialog?  In other words, when a modal dialog is displayed and this code runs, is the scope the dialog or the calling page?

Another thing: does the script run after the css is applied or before?

Thanks,
Glen

Answer 3

More information from my experimentation:

I ran the code below in the FixRiggonAndWorkspaceDimensions() function.  While this code executes when I display my custom app page in a dialog, the scope is still the calling (parent) page.  So, any attributes, classes or other information are relative to the parent page and not my custom app dialog page.

Am I correct in this?

If so, how can I create a routine like this that will run on any dialog pages?

Thanks,

Glen

Answer 4

Hi Glen,

Thanks for your post!

In my opinion, you should not directly use CSS to define the size of the modal dialog, but you should define it in the javascript that call the modal dialog.

For example:

var options ={
url: '/_layouts/spd/welcome.aspx',
title:'Welcome to SharePoint Developers Hub',
width:100,
height:150,
dialogReturnValueCallback: ShowStatus
};

For more information, please refer to:
http://www.spdeveloper.co.in/articles/pages/using-sharepoint-2010-modal-dialogs.aspx

Thanks,
Simon

---

Simon Huang

TechNet Community Support

Answer 5

Shimin,

Thanks for your reply.  That is the method that I am using to open the dialog (minus the callback setting since I don't need it).  My problem is that the Application.aspx page that I display in the dialog is set 140px below the top of the page.  This is due to the CSS and Javascript settings that are used on the custom master page.

On my custom master page, I have the title area fixed along with the ribbon.  The ribbon extends downward to cover the title area but the title and ribbon stay fixed and everything else scrolls behind it.  The css that helps do this sets the padding-top to 140px (the height of the minimized ribbon and the title area).  That padding never changes since the ribbon extends OVER the title area but no lower.

So, I tapped into the FixRibbonAdnWorkspaceDimensions() routine to try and "fix" the spacing issue dependent on the visibility of the ribbon since the only place the ribbon is NOT visible is on certain dialogs (my application page being one and "Add Document" to library being another).  Both dialogs display the body content 140px below the top of the dialog just as if compensating for the ribbon and title bar on the main pages.

The problem I seem to find is that even though the dialog may trigger the running of FixRibbonAndWorkspaceDimensions(), the context and css that is being used by the code is from the underlying main page that called the dialog not from the dialog itself.  I'm a newbie at this, so if I'm way off base just let me know.

Below is a snippet of the screen and the javascript code mentioned above.  Any help, advice or information you could provide would be greatly appreciated.  Thank you again for your time.

Sincerely,
Glen Wolinsky

 

Figure 1 - Main Page with Custom Master applied

Figure 2 - Dialog Popup

Javascript Code

function FixRibbonAndWorkspaceDimensions() {
    //  Checking length with no comparison returns false if 0
    var elmWorkspace = $("#s4-workspace");
    if (!elmWorkspace.length) { return; }
    var ribbonShown = false;
    var rbnRow = $("#s4-ribbonrow");
    if (rbnRow.length) {
        if (rbnRow.css("display") != "none") { ribbonShown = true }
    }
    if (ribbonShown) {
        elmWorkspace.paddingTop = "140px"
    }
    else {
        elmWorkspace.paddingTop = "0px"
    }
}  

Answer 6

When showing things in a dialog window I have put ?isDlg=1 at the end of the URL which makes all of the ribbon and chrome disappear.   Does this not handle the case of getting your content to the top without adjusting the CSS or JavaScript?

Answer 7

Craig,

Thanks for your reply.  I checked the parameters and isDlg is apparently already added by the shoModalDialog method.

Glen

Answer 8

I am making progress and it seems I'm almost "there" but I still need some help.  I have rewritten the scripting in the FixRibbonAndWorkspaceDimensions() routine as listed below.  I'm VERY new at SP and Javascript, so please, any information you can provide will be helpful even if you may think it's too simple to mention.

Basically, I'm trying to accomplish this:  on my main pages where the master page is displayed, I want the s4-workspace to be 140px.  IF the page is a dialog then I need to check to see if the ribbon, 1) exists, and 2) is VISIBLE.  If it IS visible, the setting is 140px otherwise, it should be zero.

I pieced this code together from examples I've found online.

Please see the questions following this code:

function FixRibbonAndWorkspaceDimensions() {
    ULSxSy: ;
    g_frl = true;
    var elmRibbon = GetCachedElement("s4-ribbonrow");
    var elmWorkspace = GetCachedElement("s4-workspace");
    
    if (!elmRibbon || !elmWorkspace) { return; }
    
    var ribbonVisible = true;
    if (GetCurrentEltStyle(elmRibbon, "visibility") == "hidden" || getElementById("Ribbon") == null) { ribbonVisible = false; }
    alert("Ribbon visible: " + ribbonVisible);
    if (ribbonVisible && document.getElementsByTagName("html")[0].className.indexOf('ms-dialog-nr') == -1) {
        elmWorkspace.paddingTop = "140px !important"
    } else {
        elmWorkspace.paddingTop = "0px !important"
    }
}  

Questions

1. What is ULSxSy: and what does it do?
2. What is g_frl?
3. I get an "Object Expected" error on the line starting with " if (GetCurrentEltStyle(" and I can't figure out why.

Answer 9

In my years of programming (from green-screen to SharePoint) have learned one thing:  even if you spend days or weeks banging your head against a wall of a problem, you learn a great deal along the way.  With that knowledge, you just may end up stumbling across your solution.

By adding the following CSS, I solved the problem (as far as I can tell).  I no longer have extra top padding added to dialogs that don't use the ribbon.

body #s4-workspace
{
    padding-top: 140px;
    height: 100%;
    overflow: visible !important;
}
.ms-dialog-nr #s4-workspace
{
    padding-top: 0px;
}