Skip to content
January 31, 2012 / red1s

Increasing Form Field Widths in SharePoint 2010


Recently I had to increase the form fields widths n some of SharePoint sites due to the content entered being wider than the length of the fields. (In honesty those forms are a bit to thin)

clip_image001

I found that this can be achieved by creating the Jquery library created by Marc from his SPService Codeplex project (which can be accessed here ) this code will need to be used in conjunction with the Jquery library (located here)

The code consists of the following elements to get it working correctly:

  1. The initial Jquery library which can be downloaded from here:

clip_image002

clip_image003

  1. Marc’s SPService Library from which the code can be download here:

clip_image004

clip_image005

  1. Finally the section below which uses the ‘SPSetMultiSelectSizes’ function and the code and further information can be accessed here:

clip_image006

All in all the code should now look like the following: (obviously the location of your JavaScript files will be based on where you have uploaded them to)

<script language="javascript" src="/Shared%20Documents/jquery-1.7.1.min.js" type="text/javascript"></script>

<script language="javascript" src="/Shared%20Documents/jquery.SPServices-0.7.0.min.js" type="text/javascript"></script>

<script language="javascript" src="/Shared%20Documents/jquery.SPServices-0.7.0.min.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">

$().SPServices.SPSetMultiSelectSizes({
    multiSelectColumn: "",
    minWidth: 0,
    maxWidth: 0
}); 

$(document).ready(function() {
  $().SPServices.SPSetMultiSelectSizes({
    multiSelectColumn: "InsurerProduct"
  });
  // You can include other script which you want to run at page load in this block as well
});</script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

clip_image007

Happy enlarging!…… 😛

Advertisements

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

%d bloggers like this: