Force vertical scrolling in SharePoint web parts

Today, a client brought up a common issue with web parts: they could set a fixed (scrollable) width for any web part, but for certain types, they could not set a fixed height. The option would be listed in the site’s Appearance settings, but saving it had no effect on the layout.

This became increasingly troublesome in the case of list web parts. Several pages collated diverse lists, and the longer lists would use all of the screen real estate at the expense of equally important lists. Limiting the number of shown items would be an unsatisfactory workaround, as the client really wanted to have lists appear with a uniform, scrollable height.

The underlying problem is due to the way SharePoint enforces web part heights. All it does is apply a "height" style to the web part in question. For example, if you set a fixed height of 200 pixels, SharePoint adds the following attribute to the web part in question:

That’s only half the battle when it comes to enforcing fixed heights for DIV-based web parts (the vast majority of all web parts). You see, in most browsers, DIVs expand to fit their content by default.

In order to correct this, we need to change the setting of a DIV’s overflow attribute from its default of "visible" (which essentially ignore the height) to either "scroll" (always show scrollbars) or "auto" (show scrollbars when needed). That will ensure our web part constrains its content to our specified height.

How do we make this change? If you need to enforce web part maximum heights globally, you could edit SharePoint’s stylesheets to add the overflow property. However, I advise against that in most situations for maintainability and to minimize secondary effects.

Instead, I recommend adding the necessary CSS information inside an HTML <style> tag on each respective page. This can easily be added through a Content Editor Web Part.

Using a Content Editor Web Part to enforce vertical scrolling

If you need to do this for a handful of individual web parts, the easiest way is to create a hidden Content Editor Web Part on each page:

1. Create the initial web part. By default, it should expand to utilize as much vertical space as it needs.

   

2. Edit the web part as usual. Under the Appearance category, set the "Height" property to the desired size.

   

   Save the changes and view the page. It will appear just as before, but our desired size will be saved for later.

3. One piece of information we’ll need to know is the HTML ID of the div containing our web part, which is in the format "WebPartWPQx", where "x" is a number. Finding this web part identifier in the page’s HTML allows us to write CSS for a specific section.

   The easiest way I’ve discovered to find a web part’s ID is to view the page’s source (right-click, View Source) and to search for the string "<span>" followed by the web part’s title. In our example, we’ll search the page’s source for "<span>Sample Vertical List", which yields the following:

   

   This shows the ID of our caption, and its number (3) tells us the ID of the web part we’re looking for (WebPartWPQ3). We’ll need this in step 7.

4. Now, go to edit the page as normal. On the edit page, select "Add a Web Part".
5. Under Miscellaneous, select "Content Editor Web Part". This web part allows you to insert pure HTML into the source of a given page.

   

6. Modify the shared web part. From the tool pane, select "Source Editor…"

   

7. Enter the required HTML to change the desired web part’s style. In this case, we’re going to insert a CSS style block to override the default behavior for a given web part. If our web part has an ID of WebPartWPQ3 (as found in step 3), we’ll add:

   <style><!–
   #WebPartWPQ3{
   overflow:auto;
   }
   –></style>

   

   You could alternatively set the property to "scroll" instead of "auto" if you’d like both horizontal and vertical scrollbars to appear regardless of height.

8. While still editing this web part, set its "Hidden" property to true (found under the Layout category). This is to prevent users from seeing a "Content Editor Web Part" when viewing the page. The custom HTML will still function.

   

9. Upon saving your changes, the web part should now display with its fixed height and scrollbar when needed.

   

10. In order to adjust the height, repeat step 2.