I’m sure we’ve all customized Lists in SharePoint to create different types of views. While most of the Styles to choose from aren’t always practical, the Boxed view is an interesting view because it creates a Table along with a row of all your properties and values, for each List item. A common issue with this view is that if you have empty values, it takes up space on the screen and is too “ugly” to use. This is particularly true if your list or library is associated with many Content Types because different Content Types may not populate certain fields. There’s also that hideous column/filter bar that doesn’t seem to have any value on a view like this.

boxed1

By adding the jQuery below, you can make the Boxed view much more presentable. It will not display columns that have empty values or unchecked (yes/no) values.

$(“table.ms-listviewtable tr td.ms-stylebox table tr”).each(function() {
var tr = $(this);
tr.find(“td.ms-stylebody”).each(function() {
td = $(this);
if (td.text() == “” || td.text() == “No”)
tr.hide();
});
});

Notice the different Content Types and the fields the associated fields with the respective Content Type.

boxed2

The jQuery below will hide the column/filter bar, set the width and bold the Content Type field:

$(“tr.ms-viewheadertr”).hide();
$(“table.ms-listviewtable”).attr(“width”, “725px”);
$(“td.ms-stylelabel:contains(‘Content Type’)”).parent().css(“font-weight”, “bold”);

I’ve tested this and both SharePoint 2010 and 2013 as they both use the same Boxed List view class names. Ensure that you have jQuery referenced on the page.