1

enter image description hereHow do I disable the horizontal scroll bar on a web part (actually it's in zone 1 on a navigation blog page web part) in SharePoint 2010? I set the the length to 5.5 inches to get a vertical scroll bar which is what I want--but now the horizontal shows up. The only way that I can get rid of the horizontal is to adjust the width to 1.7 inches which is too wide cause it cuts off half of the horizontal scroll bar. Any ideas on how I can resolve this will be GREATLY appreciated.

Improve this question
5
  • Can you provide a screen? I don't understand where's your scrollbar exacly. BTW if it's a traditional horizontal scrollbar you can disable it by setting CSS property overflow-x: hidden;
    – Alex Boev
    Feb 18, 2012 at 9:04
  • Screenshot has been added--please see above.
    – govgirl
    Feb 21, 2012 at 16:47
  • see my answer below. If you give me an HTML of that DIV I'll help you to create the CSS style.
    – Alex Boev
    Feb 21, 2012 at 17:23
  • Okay. Now I'm new to this so I'm probably going to ask a dumb question...where can I find the HTML???
    – govgirl
    Feb 21, 2012 at 18:20
  • See my screen for Internet Explorer.
    – Alex Boev
    Feb 21, 2012 at 18:59

2 Answers 2

Reset to default
1

You need to create a CSS style for this div with scrollbar and set x-overflow:hidden; (http://www.brunildo.org/test/Overflowxy2.html) If you provide me an HTML source of this div I'll create you the full CSS style, it's simple.

Here's the screen for Internet Explorer 8 or higher (http://gyazo.com/1d8ff0c3e6021aa5cd887b9298a2ba93.png): enter image description here

It's the first part of the puzzle - you need to find the right div id - it will be very similar to mine.

Next - add a content editor webpart, hide it's chrome to make it invisible and edit the content HTML to add required CSS style. See my example made for you (http://gyazo.com/e20b53ab587667d61628c98ea7de31cf.png): enter image description here

And finally I show you the full style definition (don't forget to use your own right div id!):

<style type="text/css">
#WebPartWPQ5 {
    OVERFLOW-X: hidden !important
}
</style>
Improve this answer
1
  • This was quite helpful! I will note that the div I ended up needing to change the properties on was inside of #WebPartWPQ5 and actually had the following name: #ctl00_m_g_d641fe03_4199_44b8_b20f_a21c67007e6f. It appears to be a GUID identifier for the web part that I was using. So just be aware that you may need to drill into the HTML structure of the page to find the correct div! Also, I had to specify OVERFLOW-Y:scroll in order to retain my Y axis scroll bar.
    – Shrout1
    Jun 3, 2013 at 13:17
0

I'm working in SharePoint 2013 and I have a Page Viewer webpart on my page. I've found my webpart id for the Page Viewer web part and used the css above and it's not working. I drilled down and found the iframe id and used the F12 developer tools to use the css on the iframe id and the css worked once. I can't get it to replicate. Not sure why this is not working.

Improve this answer
1
  • Hi Kandace, the answer section on questions is exclusively for answering the question. If you fail to replicate the answer, please try and Ask Your Own Question. If it's related to this one, feel free to add a hyperlink to your question and state the steps you've completed. Thanks.
    – KGlasier
    Jan 28, 2019 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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