SharePoint Master Page Border

Question

We have deployed a new master page to 2010 and our developer has left the position. Now management has given me a chance to learn development.

We had a Issue When I try to decrease the width and Size of top global navigation. The master Page is showing in veered view as shown in Fig. What to do to keep master-page Constant and increase auto?

Answer 1

The problem is that you have too many columns in a view, which expands beyond the original width of the body. This is common among OOTB lists where multiple columns are within a view. There are many possible fixes to this problem.

• Set a min-width of 's4-bodyContainer' to a higher value
• Run a jQuery/JS script to make adjustments to the width when SP is done rendering the table.

Using the above mentioned second approach, you could do something like:

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(fixWidth, "sp.js");
});

$(window).resize(function () {
    fixWidth();
});

function fixWidth(){
    //Elements with the potential to be too wide.
    //Make adjustments to below line based on your structure.
    elements = $(".ms-bodyareacell > div > table, .main-container > div > table, #layoutsTable");
    //#layoutsTable for Wiki Pages

    leftPanelWidth = $("#s4-leftpanel").width();
    //For each Elements
    $(elements).each(function(){
        //if it’s wider than the side width
        window.console && console.log('Width: ' + $(this).width());
        if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
        {
            //Calculate the new width taking the left nav into account
            newWidth = leftPanelWidth + $(this).width();
            //Set the width!
            $("#s4-bodyContainer > div").attr("style","width:" + newWidth +"px");
        }
    });
}