I finally found a way to fix it.
In my master page and by default in the master page, the <body> tag has a property called scroll.
By default that property looks like this <body scroll="no" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="v4master">
Just change that scrool="no" to scroll="yes" and like magic the scrolling works :)
Hope this was helpful.
Furthermore you can add this script to the head:
function FixRibbonAndWorkspaceDimensions(){
ULSxSy:;
g_frl = true;
var elmRibbon = GetCachedElement("s4-ribbonrow");
var elmWorkspace = GetCachedElement("s4-workspace");
var elmTitleArea = GetCachedElement("s4-titlerow");
var elmBodyTable = GetCachedElement("s4-bodyContainer");
if(!elmRibbon || !elmWorkspace || !elmBodyTable){
return;
}
if (!g_setWidthInited){
var setWidth = true;
if (elmWorkspace.className.indexOf("s4-nosetwidth") > -1)
setWidth = false;
g_setWidth = setWidth;
g_setWidthInited = true;
}
else{
var setWidth = g_setWidth;
}
var baseRibbonHeight = RibbonIsMinimized() ? 44 : 135;
var ribbonHeight = baseRibbonHeight + g_wpadderHeight;
if(GetCurrentEltStyle(elmRibbon, "visibility") == "hidden"){
ribbonHeight = 0;
} // Override default resizing behavior
// -- adds padding to the top of the "s4-workspace" <div> if the ribbon exists and has content
// -- allows the ribbon to be positioned using CSS instead of JavaScript (more accessible)
// -- checks to see if the page is inside a "no-ribbon" dialog
if(elmRibbon.children.length > 0 && document.getElementsByTagName("html")[0].className.indexOf('ms-dialog-nr') == -1){
elmWorkspace.style.paddingTop = ribbonHeight + 'px';
} And lastly add this to the stylesheet:
body.v4master {
overflow: visible;
height: inherit;
width: inherit;
}
body #s4-workspace {
overflow: visible !important;
}
body #s4-ribbonrow {
position: fixed;
z-index: 1000;
}
#s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."] {
position: fixed !important;
}
.ms-dlgOverlay {
width: 100% !important;
}This solution does two things: first, it will override the default appearance and behavior of the SharePoint interface, enabling scrollbars on your pages by default (much rejoicing is in order). Second, it keeps the ribbon fixed to your browser window using CSS (instead of JavaScript). Instead of resizing the
s4-ribbonrow and s4-workspace divisions, I’m simply adding some padding to the top of the s4-workspace element. Every time the ribbon “resize” script runs, it bumps your content down a little to make sure you can still see your site header.This should work on any master page that uses the “v4″ SharePoint interface. I’ll be using this method on every SharePoint site I create from this point forward, so definitely keep this in mind in your own SharePoint design ventures! Best of luck, and please let me know if this helps you in any way.
Part of this information was given by Kyle Schaeffer
No comments:
Post a Comment