Skip to content

Allowing Oversize List Tables to Display Properly in SharePoint 2010With a Colored Background

by on April 24, 2012

image

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();
    });

About these ads
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 38 other followers

%d bloggers like this: