Custom list column sizes in SharePoint 2010 and 2013

Ever needed to limit the size of the columns of your SharePoint list to specific widths for different columns? Here’s one way of doing it..

$( document ).ready(function (){$( document ).ready(function (){ SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, function (){ document.getElementById(“Hero-WPQ2”).onclick = function(){window.setTimeout(function(){colorColumnsFire();}, 5000 )}; window.setTimeout(function(){colorColumns();}, 5000 ); }); });function resizeColumns(tableName,c1,cw1,c2,cw2,c3,cw3,c4,cw4,c5,cw5,c6,cw6,c7,cw7,c8,cw8,c9,cw9,c10,cw10) { var EditTable = document.getElementById(‘spgridcontainer_WPQ2_leftpane_mainTable’); for (var t, i = document.getElementsByTagName(“TABLE”), e = 0; e < i.length; e++) if (tableName == i[e].summary) { t = i[e]; if (t.rows.length < 3) { t = EditTable; } } for (var s = t.rows.length, r = t.rows[0].cells.length – 1, n = r – 1, e = 0; s > e + 1; e++) /*Custom Columns*/ if ((c1 !=null) && (“undefined”!=typeof c1)){ t.rows[e].cells[c1].style.maxWidth = cw1+”px”, t.rows[e].cells[c1].style.minWidth = cw1+”px”, t.rows[e].cells[c1].style.minWidth = cw1+”px”} if ((c2 !=null) && (“undefined”!=typeof c2)){ t.rows[e].cells[c2].style.maxWidth = cw2+”px”, t.rows[e].cells[c2].style.minWidth = cw2+”px”, t.rows[e].cells[c2].style.minWidth = cw2+”px”} if ((c3 !=null) && (“undefined”!=typeof c3)){ t.rows[e].cells[c3].style.maxWidth = cw3+”px”, t.rows[e].cells[c3].style.minWidth = cw3+”px”, t.rows[e].cells[c3].style.minWidth = cw3+”px”} if ((c4 !=null) && (“undefined”!=typeof c4)){ t.rows[e].cells[c4].style.maxWidth = cw4+”px”, t.rows[e].cells[c4].style.minWidth = cw4+”px”, t.rows[e].cells[c4].style.minWidth = cw4+”px”} if ((c5 !=null) && (“undefined”!=typeof c5)){ t.rows[e].cells[c5].style.maxWidth = cw5+”px”, t.rows[e].cells[c5].style.minWidth = cw5+”px”, t.rows[e].cells[c5].style.minWidth = cw5+”px”} if ((c6 !=null) && (“undefined”!=typeof c6)){ t.rows[e].cells[c6].style.maxWidth = cw6+”px”, t.rows[e].cells[c6].style.minWidth = cw6+”px”, t.rows[e].cells[c6].style.minWidth = cw6+”px”} if ((c7 !=null) && (“undefined”!=typeof c7)){ t.rows[e].cells[c7].style.maxWidth = cw7+”px”, t.rows[e].cells[c7].style.minWidth = cw7+”px”, t.rows[e].cells[c7].style.minWidth = cw7+”px”} if ((c8 !=null) && (“undefined”!=typeof c8)){ t.rows[e].cells[c8].style.maxWidth = cw8+”px”, t.rows[e].cells[c8].style.minWidth = cw8+”px”, t.rows[e].cells[c8].style.minWidth = cw8+”px”} if ((c9 !=null) && (“undefined”!=typeof c9)){ t.rows[e].cells[c9].style.maxWidth = cw9+”px”, t.rows[e].cells[c9].style.minWidth = cw9+”px”, t.rows[e].cells[c9].style.minWidth = cw9+”px”} if ((c10 !=null) && (“undefined”!=typeof c10)){ t.rows[e].cells[c10].style.maxWidth = cw10+”px”, t.rows[e].cells[c10].style.minWidth = cw10+”px”, t.rows[e].cells[c10].style.minWidth = cw10+”px”} }
function colorColumnsFire(){ window.setTimeout(function() { document.getElementById(“Hero-WPQ2″).onclick = function(){colorColumns();} }, 5000 );}function colorColumns(){ var gridinfo = GetCtxFromView(window[‘WPQ2SchemaData’].View); var EditTable = document.getElementById(‘spgridcontainer_WPQ2_leftpane_mainTable’); var t =””; for (var t, i = document.getElementsByTagName(“TABLE”), e = 0; e < i.length; e++){ if (gridinfo.ListTitle == i[e].summary) { t = i[e]; if (t.rows.length < 3) {t = EditTable;} } } if (gridinfo.inGridMode) { for (var s = t.rows.length, e = 1; s > e; e++){t.rows[e].style.backgroundColor=”rgba(63,165,191,.2)”;e=e+1}}else{for (var s = t.rows.length, e = 2; s > e; e++){t.rows[e].style.backgroundColor=”rgba(63,165,191,.2)”;e=e+1}}window.setTimeout(function() { document.getElementById(“Hero-WPQ2”).onclick = function(){colorColumnsFire();} }, 500 );} function stickyHeaders() { function t() { jQuery(“tr:has(>th[class^=’ms-vh’]):visible”).closest(“table”).each(function () { var t = new i(jQuery(this)); if (window.SHListContainer.push(t), t.init(), t.webpart.data(“stickyHeaderData”, t), jQuery(“#s4-workspace”).on(“scroll.stickyeaders”, { elem: t }, function (t) { t.data.elem.update(); }), jQuery(window).on(“resize.stickyHeaders”, { elem: t }, function (t) { setTimeout(function () { t.data.elem.setWidth(), t.data.elem.update(); }, 50); }), (t.fixedHeight || t.fixedWidth) && t.webpart.on(“scroll.stickyHeaders”, { elem: t }, function (t) { t.data.elem.update(); }), “function” == typeof ReRenderListView) { var e = ReRenderListView; ReRenderListView = function (t, i, s) { e(t, i, s), jQuery(“#WebPart” + t.wpq).data(“stickyHeaderData”).init(); }; } }); var t = 0; g_workspaceResizedHandlers.push(function () { var i = jQuery(“#RibbonContainer”).height(); t !== i && (jQuery(window.SHListContainer).each(function () { this.s4OffsetTop = jQuery(“#s4-workspace”).offset().top, this.update(); }), t = i); }); var e = ExpCollGroup; ExpCollGroup = function (t, i, s, r) { e(t, i, s, r); var n = “#tbod” + t + “_, #titl” + t, a = setInterval(function () { “true” != jQuery(n).attr(“isloaded”) && “undefined” != typeof jQuery(n).attr(“isloaded”) || (setTimeout(function () { jQuery(n).closest(“[id^=WebPartWPQ]”).data(“stickyHeaderData”).init(); }, 200), clearInterval(a)); }, 100); }; }
function i(t) { this.list = t, this.webpart = jQuery(this.list.closest(“div[id^=WebPartWPQ]”)[0] || this.list[0]), this.fixedHeight = !([“”, “auto”, “100%”].indexOf(this.webpart.prop(“style”).height) + 1), this.fixedWidth = !([“”, “auto”, “100%”].indexOf(this.webpart.prop(“style”).width) + 1), this.init = function () { this.s4OffsetTop = jQuery(“#s4-workspace”).offset().top, this.list = jQuery.contains(document.documentElement, this.list[0]) ? jQuery(this.list) : jQuery(this.webpart.find(“.ms-listviewtable”).last()[0] || this.webpart.find(“> table”)[0]), this.listType = this.list.find(“tbody[id^=GroupByCol]”).length ? “GroupedList” : this.list.hasClass(“ms-listviewgrid”) ? “Grid” : “undefined” == typeof this.list.closest(“div[id^=WebPartWPQ]”)[0] ? “SysList” : “NormalList”, this.firstRow = this.list.find(“thead”).length ? “GroupedList” == this.listType ? this.list.find(“tbody[isloaded=true]:visible > tr”).first() : this.list.find(“> tbody > tr:nth-child(1)”) : this.list.find(“> tr:nth-child(2), > tbody > tr:nth-child(2)”), this.prevHeight = “Grid” == this.listType ? this.list.parent().closest(“.ms-listviewtable”)[0].offsetTop : this.list[0].offsetTop, this.sticky = this.webpart.find(“tr:has(>th[class^=’ms-vh’]):visible”).first(), this.stickyHeight = this.sticky.outerHeight(), this.webpartHeight = this.webpart.height(), “Grid” == this.listType && this.list.css({ “table-layout”: “fixed”, width: “auto” }), “Grid” == this.listType && (jQuery(“#spgridcontainer_” + this.webpart.attr(“id”).substr(7))[0].jsgrid.AttachEvent(SP.JsGrid.EventType.OnCellEditCompleted, function (t) { return function () { t.setWidth.apply(t, arguments); }; }(this)), this.sticky.find(“a”).on(“click”, this.fixSortFunctionality), jQuery(“th”).hover(function (t) { jQuery(t.target).parents(“.stickyHeader”).length > 0 && jQuery(t.target).find(“.clip9x6”).css(“visibility”, “mouseenter” == t.type ? “visible” : “hidden”).find(“> img”).show(); }).on(“mouseleave”, function (t) { jQuery(t.target).parents(“.stickyHeader”).length > 0 && jQuery(t.target).find(“.clip9x6”).css(“visibility”, “hidden”).find(“> img”).show(); })), this.sticky.find(“th:last-child.ms-vh-icon:has(>span.ms-addcolumn-span)”).hide().length && this.list.addClass(“addPadding”), this.setWidth(), this.update(); }, this.fixSortFunctionality = function (t) { if (jQuery(t.target).parents(“.stickyHeader”).length > 0) { var i = jQuery(t.target).closest(“.ms-listviewtable:not(.ms-listviewgrid)”)[0].clvp, e = ajaxNavigate.getParam(“InplviewHash” + i.wpid), s = {}; e.split(“-“).forEach(function (t) { var i = t.split(“=”); s[i[0]] = decodeURIComponent(i[1]); }); var r = s.SortField; s.SortField = jQuery(t.target).closest(“th”)[0].thColumnKey, s.SortDir = r != s.SortField ? “Asc” : “Asc” == s.SortDir ? “Desc” : “Asc”; var n = $.param(s); InitGridFromView(i.ctx.view, !0), i.strHash = n.replace(/&/g, “-“), i.fRestore = !0, i.RefreshPagingEx(“?” + n, !0, null); } }, this.setWidth = e(function () { this.sticky.css({ position: “static”, display: “table-row” }); var t = this.sticky.children(“th”), i = this.firstRow.children(“td”); jQuery.each([t, i], function () { jQuery(this).css(“min-width”, 0); }); for (var e = [], s = [], r = 0; r < t.length; r++) e.push(jQuery(t[r]).width()), s.push(jQuery(i[r]).width()); for (var r = 0; r < t.length; r++) jQuery(t[r]).css(“min-width”, e[r]), jQuery(i[r]).css(“min-width”, s[r]); this.sticky.css(“position”, this.sticky.hasClass(“stickyHeader”) ? “fixed” : “static”); }), this.update = e(function () { this.fixedWidth || (this.webpartOffsetTop = this.webpart.offset().top, this.firstRow.length && this.webpartOffsetTop + this.webpartHeight – this.s4OffsetTop > 0 && (this.webpartOffsetTop – this.s4OffsetTop + this.prevHeight < 0 || this.webpart.scrollTop() > this.prevHeight) ? (this.sticky.hasClass(“stickyHeader”) || this.toggleSticky(!0), this.sticky.css({ left: this.webpart.offset().left, top: !this.fixedHeight || this.webpartOffsetTop < this.s4OffsetTop + 2 ? this.s4OffsetTop + 2 : this.webpartOffsetTop })) : this.sticky.hasClass(“stickyHeader”) && this.toggleSticky(!1)); }), this.toggleSticky = function (t) { if (“SysList” == this.listType) { var i = “GroupedList” == this.listType ? this.list.find(“tbody[id^=titl]”).first().find(“td”) : this.firstRow.children(“td”), e = this.stickyHeight; i.each(function () { jQuery(this).css(“padding-top”, parseInt(jQuery(this).css(“padding-top”)) + e * (1 == t ? 1 : -1)); }); } else t ? this.list.css(“padding-top”, this.stickyHeight) : this.list.css(“padding-top”, 0); this.sticky.css({ position: t ? “fixed” : “static”, display: t ? “none” : “table-row” }), t ? this.sticky.addClass(“stickyHeader”).slideDown(200) : this.sticky.removeClass(“stickyHeader”); }; } function e(t, i) { function e() { function i() { r = +new Date, t.apply(e, o); } var e = this, a = +new Date – r, o = arguments; s && clearTimeout(s), a > n ? i() : s = setTimeout(i, n – a); } var s, r = 0, n = 50; return jQuery.guid && (e.guid = t.guid = t.guid || jQuery.guid++), e; } window.SHListContainer = [], function () { if (!jQuery(“#MSOLayout_InDesignMode”).val() && !jQuery(“#_wikiPageMode”).val()) { jQuery.inArray(“spgantt.js”, g_spPreFetchKeys) > -1 ? ExecuteOrDelayUntilScriptLoaded(function () { setTimeout(function () { t(); }, 0); }, “spgantt.js”) : t(), “undefined” != typeof _spWebPartComponents && 1 == Object.keys(_spWebPartComponents).length && ExecuteOrDelayUntilScriptLoaded(function () { var t = function i() { return SP.Ribbon.WebPartComponent.registerWithPageManager({ editable: !0, isEditMode: !1, allowWebPartAdder: !1 }), SP.Ribbon.WebPartComponent.get_instance().selectWebPart(jQuery(“#MSOZoneCell_” + Object.keys(_spWebPartComponents))[0], !0), i; }(); ExecuteOrDelayUntilScriptLoaded(function () { var i = DeselectAllWPItems; DeselectAllWPItems = function () { i(), setTimeout(function () { t(); }, 25); }; }, “core.js”); }, “sp.ribbon.js”); var i = “.stickyHeader { border: 1px solid grey; background-color: white; box-shadow: 0 0 6px -2px black; z-index: 1;}.stickyHeader > th { position: relative;}.ms-listviewtable th .ms-core-menu-box { top: auto !important; left: auto !important;}.stickyHeader th:not([id^=’spgridcontainer’]) { border-bottom: 0 !important;}.ms-listviewtable.addPadding { padding-right: 26px !important;}”; jQuery(“<div />”, { html: “<style>” + i + “</style>” }).appendTo(“body”); } }();}window.onload = jQuery(function () { “undefined” != typeof asyncDeltaManager ? asyncDeltaManager.add_endRequest(stickyHeaders) : stickyHeaders();});

#TTNheading tbody,#footer{display:none}#TTNheading{HEIGHT:28px}#TTNlist{OVERFLOW-X:auto;OVERFLOW-Y:scroll!important;HEIGHT:400px}#TTNheading,#TTNlist{padding:0}.ms-vb-lastCell{min-width:100px}.ms-alternating{background-color:rgba(63,165,191,.2)}