Problem With List Views That Exceeds Browser Window Width

February 07, 2011

Last week a customer indicated that layout problems could arise with list views. The problem arises when the amount of data/columns that is visible, exceeds the browser width. This creates an empty space next to the title row when the user scrolls horizontally.

This problem occurs when loading the page, the JavaScript of SharePoint sets the browser window width to the title row element.

After some research I found two solution to set the width of the list view to the title row.

Solution 1

The first solution is a CSS based and works only for IE 8, FF and Chrome. Add the following CSS code to a custom stylesheet.

Solution 2

This solution makes use of some JavaScript to set the correct width to the title row. This solution works on IE 7, IE 8, FF, and Chrome.

The code will check if the list view width and when it is wider than the browser window width, the list view width is set to the title row.

In the code I added an array of elements to which the width needs to be set when the list view is too wide. The standard elements to which the width needs to be assigned to are the top navigation section (#s4-topheader2) and the site description section (.s4-title).

This solution also works when using my footer solution. You will just need to add the ".footer" element to the JavaScript array.