I'm stuck witch a scrollbar (horizontal and vertical)that appears on the site while loading. It's kind of disturbing, it appears about 280 px below the top and is around 18XX px wide. I can't find a solution but I think it has to do with the title row. The scrollbar disappears when i go for display:none.


But that takes away my menu to so I need another solving. Does anyone have any ideas? I've gone through my style sheets and conditional tags, and i can't see why or were this is coming from. Any help would be greatly appreciated.


  <div id="s4-workspace" style="width:1906px; height:237px;">









You really need to inspect the elements in f12 developer to see what tag is causing the scroll and set the above accordingly! hidden attribute will set it to no show regardless! so will need to set it to show otherwise! auto lets the browser handle it.


ok so were getting close!

Firstly i need to know when you inspect the element s4-workspace where is it getting set? is there any custom css that is calling s4-workspace?

so goto f12 developer and click on the control with id s4-workspace and look to the right it should show the css applied and the css file its comming from. Usually it should only be corev4.css

you should see somthing like:



BODY #s4-workspace

that should be the correct value, your width and height should be set to auto and not 100%, its container could be massive but empty causing the #s4-workspace to be 100% of its parent container. Setting it to auto should take care of it (hide show according to filled content on page)


Within sharepoint designer, you need to connect to your site. Once connected you should see on the left side some areas... You want the master pages and also page layouts.

unlike html, asp.net seperates the form... You have your masterpage that holds all the containers (like ). This is the topmost view. As for the layouts it has to have a masterpage, think of the layouts as the body tag, you cant have either on their own and so you need both to get the page working.

now onto the point... when you see your page do you see the top menu with the title and search? that is within the masterpage.... now look to the left you should see quick links... that is also within the masterpage. The area in the middle is the body.

I belive the tag your looking for has the id to somthing on the lines of:

<div class=s4-nosetwidth id=s4-workspace>

it is this div that is controlling the scroll and size of your body.. Goto the page in question -> open up f12 developer -> click on the mouse button -> now click on the gray area to the left of the quick links it should be that tag. Or use the seach feature on f12 developer and search for the id or class name above. Check the width and height.

now i know you have done that as you have shown:

 <div id="s4-workspace" style="width:1906px; height:237px;">

but it should be:

 <div id="s4-workspace" style="width:auto; height:auto;">

so somthing custom (css/masterpage/layouts) is overwitting your div. The default size for height and width should be auto.

So to check out the layouts file. You need to use sharepoint designer to know what is being used as its indicated with a tick or through ui:

goto you site, click on site actions -> site settings -> under galleries click on Master pages and page layouts.



that should be where both your masterpage and layouts page (aspx) files are stored.

when you open up the masterpage you should see "s4-workspace" if you search for it.

You need to also know where is that being edited from? i presume a css file but not from covev4.css but rather some other css file that is custom!

One way to test this, is by changing the masterpage to a default masterpage:

goto your site -> click site actions -> site settings -> under look and feel click masterpage -> in the first drop down box select v4.master and save. Could you also post here what css its inheriting from? you should see it at the bottom!

now goto the page and see if its working as it should.

if its correct than you now its beacuse of the masterpage and css... if its inheriting from a css file than its the css... otherwise its the masterpage!

  • #s4-workspace { left: 0; top: 0; overflow-y: scroll; overflow-x: hidden; width:100%!important; } I've looked in to the html and it seems like the "S4-workspace" has the width and height 1906x237px and thats why the site is to wide. The code above deletes the scrollbar but the page is still 1906px wide... Do you have any suggestions? – Gustaf Jan 29 '14 at 13:43
  • just updated my answer – Ali Jafer Jan 29 '14 at 14:22
  • Thanks, you're fast! It's getting set in the element.style, i've updated the code above. I tried to replace that code and set the height and width to auto, but then the element changed the height to 550px and width to 1606px automatically. Isn't that weird? – Gustaf Jan 29 '14 at 15:32
  • that is weird! lol, i presume you still have the issue? i presume that its on auto but its setting the correct hight and width? – Ali Jafer Jan 29 '14 at 15:40
  • Yes, can it be something that lies in the background? I can't find anything... It's much better now but the content is only 800px wide so the vertical scrollbar shouldn't appear until the window is narrower. – Gustaf Jan 29 '14 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.