Monday, November 9, 2009

Enlarging a SharePoint Lookup field in the EditForm.aspx page

Jeremy Williams, Sr. Director, Modern Workplace

A cool feature within SharePoint is the ability to perform a look-up of information stored in another SharePoint data structure (be it a list, library, etc.).  However, the standard form that Microsoft provides to interact with the lookup field is a bit narrow.  Under normal circumstances, this isn't an issue, but if you're performing a lookup on a column that has verbose information in it, the narrow form quickly becomes an annoyance.  Luckily there's an easy (and quick) way to fix this with SharePoint Designer!

First of all, here's a screenshot of the problem (notice that we have no idea what those Lookup Values are since they've been truncated)

The offending control exists when we are viewing the Edit Form (EditForm.aspx).  As such, we need to open up our Document Library in SharePoint Designer, open the 'Forms' folder, and open EditForm.aspx.  Once this has been opened, we're going to add a webpart to the only zone on the page.  Navigate to the Web Parts task pane, and drag the Content Editor Web Part (CEWP) to the zone.  Once the web part is on the page, you can go ahead and save your changes.  Accept the warning from SharePoint Designer.

Now, navigate to the page in your browser.  Since you're customized the page, you'll now be able to select 'Edit this page' from Site Settings.  Go ahead and edit the page and open the settings for the CEWP.  You'll want to add the following code into the source of the CEWP. 

<style type="text/css">
td.ms-input div
{
     width: 350px !important;
}
</style>

Now, go ahead and tweak your appearance settings for the CEWP so that it isn't displayed to your users (set chrome to none).  Exit editing mode and you're good to go.  The final product is shown below.  Please note: this method will resize all of the fields that leverage the .ms-form tag, so you'll notice that your text boxes just got a little bit longer by using this method.