General IT‎ > ‎

SharePoint 2013 - Hide Horizontal Scrollbar on Front Page

posted 23 Jun 2015, 07:45 by Tristan Self
On our Microsoft SharePoint 2013 home page, we had a horizontal scrollbar appear.

What seemed to be happening was within the master CSS file was that the "s4-workspace" was of the "ms-core-overlay" that affects the whole size of the page was using this:

 
#s4-workspace {
 width: auto !important;
 height: auto !important;
 overflow: auto !important;
}

As you can see the "overflow" was set to auto, this sets the scroll bars for the X and Y axis to auto. I want the X axis to be hidden, the page shouldn't hang over but it does a bit on a 1024 x 768 screen, so to resolve this I added the following code to our main.css file that is used for any adjustments to the base CSS for the whole theme.

.ms-core-overlay {
 overflow-y: auto !important;
 overflow-x: hidden !important;
}

As the main.css is evaluated after the base CSS, this overrides what is set in the base CSS. And boom, the scroll bar is gone!


Comments