Dropdown menu doesn't fit in form

Question

I have a problem with the way Internet Explorer displays the drop down menu from a look up column in a form. I have a list that contains the names of US, Mexican and Canadian states. In State Folder content type I have a look up column that allows the user to select the state.

In Chrome and Firefox this looks nice

In Internet Explorer It looks strange.

Note that the form gains a new scrolbar that was not there previously, the width of the drop down is smaller than the width of the drop down box and part of the drop down list goes off the form.

I would like to make IE drop down look like Chrome or at least make it not be longer then form so there would be no scrolling

Answer 1

This is a notorious and well-known issue in SharePoint.

Background

Let me explain why it happens: SharePoint is a Microsoft product, as is Internet Explorer, and it's quite a customary thing when some features work in IE but don't work in other browsers. Other browsers always were and still are "partially supported" by SharePoint.

This is what happens here: when number of items in a lookup field dropdown exceeds 20, SharePoint transforms a usual dropdown browser control to an advanced dropdown with filtering ability. So if you start typing into this "State" dropdown in IE, it will filter the items as you type, which is in fact quite nice if you have really lots of them.

Solution

The simplest solution would be to put some fields after this "State" field (I think even one field will be enough). In this case, there will be enough place to the bottom of the form so the issue will never happen.

Another solution is to use SPServices Opensource JavaScript library created by Marc D Anderson, which can be used to turn this filter-enabled lookup back into plain simple lookup. He has a special function for that: SPComplexToSimpleDropdown.

Using SPServices is quite simple. You will need to add a Content Editor WebPart to your page, add reference to SPServices.js, and then also embed the following JS code:

$().SPServices.SPComplexToSimpleDropdown({
    columnName: "State"
});

For more information, please visit SPServices CodePlex site using the links above, the project is well documented.