none
#s4-workspace mucking with my fixed width design on various settings pages

    Question

  • I have created a modified master page (based on v4.master) and applied custom CSS to a SharePoint 2010 site to create a fixed width design.  Basically, I removed the div with id="s4-workspace" and then, in my CSS file, applied the following styles:

     

    /* Have to make overflow-x hidden to prevent double scroll bars from displaying (since have an overflow settings on .s4-ba) */
    body {
    	overflow-x: hidden !important;
    	overflow-y: auto !important;
    }
    
    /* Fixed width body */
    form {
    	width: 960px !important;
    	min-height: 100%;
    	
    	/* Centers the form area */
    	margin-left: auto;
    	margin-right: auto;
    	border: 1px solid #d5d5d5;
    }
    
    /* Background for extra space around fixed width design */
    body {
    	background: #ffffff;
    }
    
    /* Displays scrollbars when list content expands farther than page limits */
    .s4-ca {
    	/* Should be equal to the size of the quick launch bar's leftpanel container + a few pixels */
    	margin-left: 155px !important;
    	
    }
    
    .s4-ba {
    	overflow-x: auto;
    	min-height: 100% !important;
    }
    

     

    This has worked fine for regular pages.  No double scroll bars, no weird cutoffs, etc.  Only real pain in my side is the footer that doesn't stick, but I gave up on that dream a few days ago :)

    Anyway, when I access various settings pages (for example, the Enterprise Metadata and Keywords Settings page), the #s4-workspace is back and it's making my design span outside the widths set by my form styles.

    I can't figure out which master page the settings pages are using - since I set the site to use my custom master page for regular pages and for settings pages.  I've seen some posts on adding a "s4-nosetwidth" class to the s4-workspace div.  I'm thinking that wouldn't really help, since it looks like these settings pages aren't doing what I told them to do, which is use the master page I slaved over.

    Does anyone know how to change the master page the various settings pages are using so that I don't have these pesky scroll issues?

    • Edited by jcjackson867 Sunday, December 18, 2011 7:35 PM Added images for illustration purposes
    Sunday, December 18, 2011 7:32 PM

All replies

  • Are you using the publishing features (in SharePoint Server or Enterprise)?  I believe the answer will differ if you are or not.  Either way, it shouldn't be impossible to solve this.
    Monday, December 19, 2011 3:50 AM
  • Yes, I have enabled the SharePoint Server Publishing site feature and have created several publishing pages (one to serve as the home page, others to serve as landing pages for different functions).  Since posting my question, I've also noticed that various dialogue boxes (not all of them, but like the HTML edit pop-up when editing a Content Editor web part, the upload a document pop-up) are cutting off the right side of the content.  I'm certain that I'm setting the fixed width on the wrong tag, but I'm stumped how to proceed.

    Thank you for your quick response!

    Monday, December 19, 2011 5:36 PM
  •  

    I never really did find a fix to this.  What I ended up having to do was to scrap my use of the customized master page I had created (based off of the v4.master file) and start with Randy Drisgill's starter publishing master page (downloaded through a link on his blog:  http://blog.drisgill.com/2010/03/updated-2010-starter-master-pages-up-on.html).

    After correcting three URLs at the very beginning of the file (they were missing the ~ in front of them and it was resulting in an error when I navigated to the page to which I applied the starter master page), adding some IDs to various divs, and moving the footer so I could have it stick on the bottom of the page (I used the method described here: http://www.cssstickyfooter.com/using-sticky-footer-code.html), the master page was least working.  From here, I had to recreate all of my CSS to use the new classes and IDs.  Ultimately, Randy's starter master page made applying styles way easier - especially with regards to styling the top links/navigation bar.

    Anyway, long story short, I used the following CSS after using Randy's master page to fix the width of the main content and center the ribbon contents.  To eliminate any overlapping issues with pages with a lot of content, I had to apply a height and width (not ideal, but I got sick of dinking around with it) to my custom ID "pagecontent."  (Note: I had added the "pagecontent" ID to a div directly after the div with class "s4-ca," so that I could have a wrapper around all of the main page content).

     

    /* Fixes width of main content area */
    div#s4-workspace {
    	width: 970px;
    	margin-left: auto;
    	margin-right: auto;
    	overflow: hidden;
    }
    
    /* Centers ribbon to match width of main content area */
    #s4-ribboncont {
    	width: 970px;
    	margin-left: auto;
    	margin-right: auto;	
    }
    
    /* Floats the main page content so that it will display beneath the social notification icons */
    div#pagecontent {
    	overflow-x: auto !important;
    	width: 815px;
    	height: 665px;
    	margin-top: 5px;
    	float: left;
    }

    Anyway, I'm pretty sure this is not the best way to fix the width and eliminate scrolling issues, but after searching for quite a while, the best solution I could find required you to use jquery.  After trying my best to understand it, I failed miserably.  And thus was born this approach.

     

    Tuesday, January 10, 2012 11:44 PM