Allowing Oversize List Tables to Display Properly in SharePoint 2010With a Colored Background
Due to tables being within divs, if you want a colored border or background (in my case done with Margin settings) SharePoint causes the content to push out of the background frame. A way to fix this is to use something similar to the jQuery below.
The Code
NOTE: you will need to adjust the additional width (400) to reflect your margins and quick launch menu width.
JQuery Code
//SP table overflow fix
function spOverflowFix(){
var orig_width = $(‘#s4-bodyContainer’).css(‘min-width’);
orig_width = parseInt(orig_width.replace(/px/,""));
//alert(‘orig: ‘+orig_width);
var min_width = orig_width;
var ca_width = $(‘.s4-ca’).width();
var new_min_width=0;
$(‘.s4-ca table’).each(function(){ //changed table[width] to just table for multiple column webpart layouts
var this_width = $(this).outerWidth();
//alert(this_width);
if (this_width > ca_width){
//alert ("I am bigger! this:"+this_width + "ca:"+ca_width +" min:"+min_width);
if (this_width > ca_width && this_width > new_min_width){
//alert("still bigger – this:" +this_width+ " ca:"+ca_width+" min_width:"+new_min_width);
new_min_width = this_width;
}
}
});
//alert(min_width+"px – orig: "+orig_width);
if (new_min_width+400 > orig_width){
//alert("changing:"+(min_width+400));
$(‘#s4-bodyContainer’).css(‘min-width’, (new_min_width+400)+ ‘px’);
}
}//end overflow fix
spOverflowFix();
$(window).resize(function() {
spOverflowFix();
});
