Sharepoint drop down list doesn't display properly for more than 20 items with Internet Explorer

Question

I had this problem on my three sharepoint sites and i manage to resolve this problem by modifying CSS code (cf http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010general/thread/64796605-bcbb-4a87-9d8d-9d609579577f/) on two of them.

I don't know why this doesn't work on my third one which has same updates, same CSS and same html code... I tried several solutions such as adding indesign="true"(this can't be use because the lists got more than 75 columns). cf http://www.codeproject.com/Articles/194254/Advanced-fixing-SharePoint-2010-large-lookup-dropd

The only solutions i found required javascript but i don't really want to use it...

If someone have another solution to propose, i would really appreciate.

EDIT: Thanks to moontear i found something quite great. I replace the beginning of the script by : $(document).ready(function () {

$('.ms-lookuptypeintextbox').each(function(){
    OverrideDropDownList($(this).attr('title'));
});

// Main Function
function OverrideDropDownList(columnName) {
...

By this way, i just have to include the script and don't care about what columns got problems...

Answer 1

This script seems to be quite great to solve this problem... Thank you moontear for your comment The original script come from : http://sharepointegg.blogspot.de/2010/10/fixing-sharepoint-2010-lookup-drop-down.html

$(document).ready(function () {

$('.ms-lookuptypeintextbox').each(function(){
    OverrideDropDownList($(this).attr('title'));
});

// Main Function
function OverrideDropDownList(columnName) {

// Construct a drop down list object
var lookupDDL = new DropDownList(columnName);

// Do this only in complex mode...
if (lookupDDL.Type == "C") {

// Hide the text box and drop down arrow
lookupDDL.Obj.css('display', 'none');
lookupDDL.Obj.next("img").css('display', 'none');

// Construct the simple drop down field with change trigger
var tempDDLName = "tempDDLName_" + columnName;
if (lookupDDL.Obj.parent().find("select[ID='" + tempDDLName + "']").length == 0) {
lookupDDL.Obj.parent().append("<select name='" + tempDDLName + "' id='" + tempDDLName + "' title='" + tempDDLName + "'></select>");

lookupDDL.Obj.parent().find("select[ID='" + tempDDLName + "']").bind("change", function () {
updateOriginalField(columnName, tempDDLName);
});
}

// Get all the options
var splittedChoices = lookupDDL.Obj.attr('choices').split("|");

// get selected value
var hiddenVal = $('input[name=' + lookupDDL.Obj.attr("optHid") + ']').val();
if (hiddenVal == "0") {
hiddenVal = lookupDDL.Obj.attr("value")
}

// Replacing the drop down object with the simple drop down list
lookupDDL = new DropDownList(tempDDLName);

// Populate the drop down list
for (var i = 0; i < splittedChoices.length; i++) {
var optionVal = splittedChoices[i];
i++;
var optionId = splittedChoices[i];

var selected = (optionId == hiddenVal) ? " selected='selected'" : "";
lookupDDL.Obj.append("<option" + selected + " value='" + optionId + "'>" + optionVal + "</option>");
}
}
}

// method to update the original and hidden field.
function updateOriginalField(child, temp) {
var childSelect = new DropDownList(child);
var tempSelect = new DropDownList(temp);

// Set the text box
childSelect.Obj.attr("value", tempSelect.Obj.find("option:selected").val());

// Get Hidden ID
var hiddenId = childSelect.Obj.attr("optHid");

// Update the hidden variable
$('input[name=' + hiddenId + ']').val(tempSelect.Obj.find("option:selected").val());
}

// just to construct a drop down box object. Idea token from SPServces
function DropDownList(colName) {
// Simple - when they are less than 20 items
if ((this.Obj = $("select[Title='" + colName + "']")).html() != null) {
this.Type = "S";
// Compound - when they are more than 20 items
} else if ((this.Obj = $("input[Title='" + colName + "']")).html() != null) {
this.Type = "C";
// Multi-select: This will find the multi-select column control on English and most other languages sites where the Title looks like 'Column Name possible values'
} else if ((this.Obj = $("select[ID$='SelectCandidate'][Title^='" + colName + " ']")).html() != null) {
this.Type = "M";
// Multi-select: This will find the multi-select column control on a Russian site (and perhaps others) where the Title looks like '????????? ????????: Column Name'
} else if ((this.Obj = $("select[ID$='SelectCandidate'][Title$=': " + colName + "']")).html() != null) {
this.Type = "M";
} else
this.Type = null;
} // End of function dropdownCtl
});