WebDropDown grid columns misaligned after first row in IE 10/11

Here is the control in the markup

<cc1:MultiColumnWebDropDown ID="mcdAccount" runat ="server"

DropDownContainerWidth="450px"

DropDownContainerHeight="100px"

Style="position: absolute; top:0px; left: 0px;"

Width="110px">

</cc1:MultiColumnWebDropDown>

Which inherits from WebDropDown, with this skin

<cc1:MultiColumnWebDropDown runat ="server"

CssClass="mcd_Control"

DisplayMode="DropDownList"

DropDownOffsetX ="0"

DropDownOffsetY = "0"

EnableAjaxViewState="true"

EnableAnimations="false"

EnableAutoFiltering="Off"

EnableClosingDropDownOnBlur="true"

EnableClosingDropDownOnSelect="false"

EnableDropDownAsChild="false"

EnableLoadOnDemand="false"

HeaderCaptionCssClass="GridColumnHeaderNew"

Height="17px"

ItemCssClass ="mcd_TemplateGridThinRowNoWrap"

TabIndex="1"

TemplateStyleSetName="MyBlue"

TemplateStyleSetPath ="~/ig_res"

</cc1:MultiColumnWebDropDown>

Using this css

/*below for multiColumnDropDown*/

.mcd_Control>div>table>tbody>tr>td>input {

color:#000000;

background-color:rgb(245,245,245);

font-family:Sans-Serif;

font-size:12px;

}

And here is the javascript file.

//**************************************************************************************************

// <file>

// <name>

// MultiColumnWebDropDown.js

// </name>

// <remarks>

// Please make sure an existing routine doesn't perform the same function.

// </remarks>

// </file>

//**************************************************************************************************

function multiColumnDropDown_init(csoJson) {

var _args;

var _cancelKeyEvent = true;

var _closeDropDown = true;

var _cso;

var _sender;

try {

_cso = JSON.parse(csoJson);

} catch (ex) {

siteHandleScriptError('multiColumnDropDown_init', ex);

}

function _applyRowStyle(row, className) {

try {

if (className === 'mcd_ShowRow') {

row.get_element().style.display = 'inline';

row.get_element().style.visibility = 'visible';

} else {

row.get_element().style.display = 'none';

row.get_element().style.visibility = 'hidden';

}

} catch (err) {

siteHandleScriptError('applyRowStyle', err);

}

function _clearSelection() {

var grid;

var webDropDown;

try {

grid = $find(_cso.WebDataGridID);

webDropDown = $find(_cso.WebDropDownID);

grid.get_behaviors().get_selection().get_selectedRows().clear();

webDropDown.set_currentValue('', false); // true);

webDropDown._elements.Input.value = '';

} catch (err) {

siteHandleScriptError('clearSelection', err);

}

this.clearSelection = function () { return _clearSelection(); };

function _delayedInitialization() {

var multiColumnTemplate;

try {

multiColumnTemplate = $("." + _cso.MyCSON + "_DetachedMultiColumnTemplate");

$(ig_controls[_cso.WebDropDownID].behavior.get_targetContainer()).remove();

_sender.behavior.set_targetContainer(multiColumnTemplate[0]);

} catch (err) {

siteHandleScriptError('delayedInitialization', err);

}

this.delayedInitialization = function () { return _delayedInitialization(); };

function _dropDownClosing(sender, e) {

try {

//The closing may need to be cancelled depending on what is being clicked.

if (!_closeDropDown) {

e.set_cancel(true);

}

} catch (err) {

siteHandleScriptError('dropDownClosing', err);

}

this.dropDownClosing = function (sender, e) { return _dropDownClosing(sender, e); };

this.get_currentValue = function () { return $find(_cso.WebDropDownID).get_currentValue(); };

function _set_currentValue(value) {

var dispValue;

var previousValue;

var webDropDown;

try {

webDropDown = $find(_cso.WebDropDownID);

previousValue = webDropDown.get_currentValue();

_setSelectedItemByValue(value);

webDropDown.set_currentValue(value, false); // true);

webDropDown._raiseClientEvent('ValueChanged', 'DropDownEdit', event, null, value, previousValue);

dispValue = _getSelectedRowCellValue(_cso.DisplayValueKey);

if (dispValue === null) {

dispValue = '';

}

webDropDown._elements.Input.value = dispValue;

} catch (err) {

siteHandleScriptError('set_currentValue', err);

}

this.set_currentValue = function (value) { return _set_currentValue(value); };

function _getDisplayedRowsCount() {

var displayedCnt = 0;

var inx;

var grid;

var rows;

var row;

var style;

try {

grid = $find(_cso.WebDataGridID);

rows = grid.get_rows();

for (inx = 0; inx < rows.get_length() ; inx++) {

row = rows.get_row(inx);

style = row.get_element().style;

if ((style.display !== 'none') && (style.visibility !== 'hidden')) {

displayedCnt++;

}

} catch (err) {

siteHandleScriptError('getDisplayedRowsCount', err);

}

return displayedCnt;

}

this.getDisplayedRowsCount = function () { return _getDisplayedRowsCount(); };

function _getRowCellValue(colKey, row) {

var cell;

var val;

try {

//Gets the cell object in the row for the specified column key

cell = row.get_cellByColumnKey(colKey);

//Gets the text in the cell

val = cell.get_value();

if ((cell.get_column().get_type() === 'number') && (cell.get_text() === '')) {

val = null;

}

} catch (err) {

siteHandleScriptError('getRowCellValue', err);

}

return val;

}

//this.getRowCellValue = function (colKey) { return _getRowCellValue(colKey); };

function _getSelectedRowCellValue(colKey) {

var behavior;

var grid;

var row;

var selection;

var val = null;

try {

grid = $find(_cso.WebDataGridID);

behavior = grid.get_behaviors();

selection = behavior.get_selection();

if (selection.get_selectedRows().get_length() > 0) {

row = selection.get_selectedRows().getItem(0);

val = _getRowCellValue(colKey, row);

}

} catch (err) {

siteHandleScriptError('getSelectedRowCellValue', err);

}

return val;

}

this.getSelectedRowCellValue = function (colKey) { return _getSelectedRowCellValue(colKey); };

function _hideMatchingRows(colKey, filterValue) {

try {

_toggleMatchingRows(colKey, filterValue, "mcd_HideRow", "mcd_ShowRow");

} catch (err) {

siteHandleScriptError('hideMatchingRows', err);

}

this.hideMatchingRows = function (colKey, filterValue) { return _hideMatchingRows(colKey, filterValue); };

function _hideNonMatchingRows(colKey, filterValue) {

try {

_toggleMatchingRows(colKey, filterValue, "mcd_ShowRow", "mcd_HideRow");

} catch (err) {

siteHandleScriptError('hideNonMatchingRows', err);

}

this.hideNonMatchingRows = function (colKey, filterValue) { return _hideNonMatchingRows(colKey, filterValue); };

function _intializeDropDown(sender, e) {

try {

_sender = sender;

_args = e;

setTimeout(_cso.MyCSON + '.delayedInitialization()', 30);

} catch (err) {

siteHandleScriptError('intializeDropDown', err);

}

this.intializeDropDown = function (sender, e) { return _intializeDropDown(sender, e); };

function _inputKeyDown(sender, e) {

//var cancelEvent = true;

var grid;

var inx = 0;

var keyChar = null;

var keyCode;

var pnx = 0;

var row;

var rows;

var selection;

var webDropDown;

try {

_cancelKeyEvent = true;

grid = $find(_cso.WebDataGridID);

selection = grid.get_behaviors().get_selection();

rows = grid.get_rows();

if (selection.get_selectedRows().get_length() > 0) {

pnx = selection.get_selectedRows().getItem(0).get_index();

}

keyCode = e.get_browserEvent().keyCode;

switch (keyCode) {

case 9: //Tab Key processes normally

case 13: //Enter Key processes normally

break;

case 38: //Up Arrow Key

if (pnx > 0) {

_clearSelection();

selection.get_selectedRows().add(rows.get_row(pnx - 1));

_cancelKeyEvent = false;

}

break;

case 40: //Down Arrow Key

if (pnx < grid.get_rows().get_length() - 1) {

_clearSelection();

selection.get_selectedRows().add(rows.get_row(pnx + 1));

_cancelKeyEvent = false;

}

break;

default:

webDropDown = $find(_cso.WebDropDownID);

break;

}

// if (webDropDown.get_displayMode() === 0) {

// keyChar = String.fromCharCode(keyCode);

// if (keyChar !== null) {

// for (inx = pnx + 1; inx < rows.get_length(); inx++) {

// row = rows.get_row(inx);

// displayVal = _getRowCellValue(_cso.DisplayValueKey, row);

// if (displayVal.toUpperCase().startsWith(keyChar)) {

// _clearSelection();

// selection.get_selectedRows().add(row);

// _cancelKeyEvent = false;

// break;

// }

// if (_cancelKeyEvent) {

// for (inx = 0; inx <= pnx; inx++) {

// row = rows.get_row(inx);

// displayVal = _getRowCellValue(_cso.DisplayValueKey, row);

// if (displayVal.toUpperCase().startsWith(keyChar)) {

// _clearSelection();

// selection.get_selectedRows().add(row);

// _cancelKeyEvent = false;

// break;

// }

// break;

// }

if (!_cancelKeyEvent) {

//if (_cso.DisplayValueKey === _cso.DataValueKey) {

_rowSelectionChanged(sender, e);

// } else {

// //setTimeout(_cso.MyCSON + '.rowSelectionChanged(' + sender + ',' + e + ')', 30);

// setTimeout(_cso.MyCSON + '.rowSelectionChanged()', 100);

// }

e.set_cancel(true);

}

} catch (err) {

siteHandleScriptError('inputKeyDown', err);

}

this.inputKeyDown = function (sender, e) { return _inputKeyDown(sender, e); };

//function _itemMouseDown(sender, e) {

// try {

// window.status('itemMouseDown() fired...');

// } catch (err) {

// siteHandleScriptError('itemMouseDown', err);

// }

//}

//this.itemMouseDown = function (sender, e) { return _itemMouseDown(sender, e); };

// function _inputKeyUp(sender, e) {

// var dispValue;

// var webDropDown;

// try {

// if (!_cancelKeyEvent) {

// webDropDown = $find(_cso.WebDropDownID);

// dispValue = _getSelectedRowCellValue(_cso.DisplayValueKey);

// if (dispValue === null) {

// dispValue = '';

// }

// webDropDown._elements.Input.value = dispValue;

// //// _rowSelectionChanged(sender, e);

// //// //setTimeout(_cso.MyCSON + '.rowSelectionChanged(' + sender + ',' + e + ')', 30);

// //// setTimeout(_cso.MyCSON + '.rowSelectionChanged()', 60);

// //// //e.set_cancel(true);

// }

// } catch (err) {

// siteHandleScriptError('inputKeyUp', err);

// }

// this.inputKeyUp = function (sender, e) { return _inputKeyUp(sender, e); };

function _rowSelectionChanged(sender, e) {

var currentValue;

var webDropDown;

try {

//Gets reference to the WebDropDown

webDropDown = $find(_cso.WebDropDownID);

currentValue = _getSelectedRowCellValue(_cso.DataValueKey);

//Sets the text of the value display to the product name of the selected row

previousValue = webDropDown.get_currentValue();

_set_currentValue(currentValue);

webDropDown._elements.Input.focus();

webDropDown.closeDropDown();

siteSetDirtyData('Y');

} catch (err) {

siteHandleScriptError('rowSelectionChanged', err);

}

this.rowSelectionChanged = function (sender, e) { _rowSelectionChanged(sender, e); };

this.setCloseDropDown = function(close) { _closeDropDown = close; } ;

function _set_enabled(isEnabled) {

var webDropDown;

try {

//Gets reference to the WebDropDown

webDropDown = $find(_cso.WebDropDownID);

webDropDown.set_enabled(isEnabled);

} catch (err) {

siteHandleScriptError('set_enabled', err);

}

this.set_enabled = function (isEnabled) { _set_enabled(isEnabled); };

function _set_focus() {

var webDropDown;

try {

//Gets reference to the WebDropDown

webDropDown = $find(_cso.WebDropDownID);

webDropDown._element.focus();

} catch (err) {

siteHandleScriptError('set_focus', err);

}

this.set_focus = function () { _set_focus(); };

function _setSelectedItemByColumnValue(colKey, value) {

var compareVal = null;

var displayVal = null;

var grid;

var inx;

var row;

var rows;

var selection;

var webDropDown;

try {

_clearSelection();

grid = $find(_cso.WebDataGridID);

rows = grid.get_rows();

webDropDown = $find(_cso.WebDropDownID);

for (inx = 0; inx < rows.get_length(); inx++) {

row = rows.get_row(inx);

compareVal = _getRowCellValue(colKey, row);

if (compareVal === value) {

displayVal = _getRowCellValue(_cso.DisplayValueKey, row);

if (displayVal === null) {

displayVal = '';

}

selection = grid.get_behaviors().get_selection();

selection.get_selectedRows().add(row);

break;

}

webDropDown.set_currentValue(displayVal, false); // true);

webDropDown._elements.Input.value = displayVal;

} catch (err) {

siteHandleScriptError('setSelectedItemByColumnValue', err);

}

this.setSelectedItemByColumnValue = function (colKey, value) { return _setSelectedItemByColumnValue(colKey, value); };

function _setSelectedItemByValue(value) {

try {

_setSelectedItemByColumnValue(_cso.DataValueKey, value);

} catch (err) {

siteHandleScriptError('setSelectedItemByValue', err);

}

this.setSelectedItemByValue = function (value) { return _setSelectedItemByValue(value); };

function _set_visible(isShown) {

var webDropDown;

try {

//Gets reference to the WebDropDown

webDropDown = $find(_cso.WebDropDownID);

webDropDown.set_visible(isShown);

} catch (err) {

siteHandleScriptError('set_focus', err);

}

this.set_visible = function (isShown) { _set_visible(isShown); };

function _toggleMatchingRows(colKey, filterValue, matchingClass, nonMatchingClass) {

var compareVal;

var grid;

var rows;

var row;

var inx;

try {

grid = $find(_cso.WebDataGridID);

rows = grid.get_rows();

for (inx = 0; inx < rows.get_length(); inx++) {

row = rows.get_row(inx);

compareVal = _getRowCellValue(colKey, row);

if ((inx === 0) && ((compareVal === '') || (compareVal === 0) || (compareVal === null))) {

// retain the blank row selection despite the filterValue

_applyRowStyle(row, "mcd_ShowRow");

} else {

if (compareVal === filterValue) {

_applyRowStyle(row, matchingClass);

} else {

_applyRowStyle(row, nonMatchingClass);

}

} catch (err) {

siteHandleScriptError('toggleMatchingRows', err);

}

Do you see anything in here that would interfere?

Cliff