Hiding and Showing A drop down list with Javascript

Question

I use javascript to hide and show dev express combo box control.

In the page load I have the following code to hide the control:

window.onload = function() { 
    document.getElementById('StateDropDown').style.display = 'none';
}

When the country is set as United States, then I show the combo box with US States.

if(s.GetText() == 'UNITED STATES') {
    document.getElementById('StateTextBox').style.display = 'none';
    document.getElementById('StateDropDown').style.display = 'block';
}
else {
    document.getElementById('StateDropDown').style.display = 'none';
    document.getElementById('StateTextBox').style.display = 'block';
}
e.processOnServer = false;  

The problem is the size of the drop down when it's shown. Even though I set Country Combo Box and State Combo Box to be the same size, State Combo Box is shorter when it is shown on the screen. This happens in Internet Explorer. Chrome renders correctly.

Anyone knows why IE behaves like that?

Answer 1

If you are using DevExpress controls, suggest the following approach subscribe to events :

window.addEventListener("load", function() {}); 

or

ASPxClientUtils.AttachEventToElement("load", function() {});