IE Overflow and Javascript...

[ajlisowski]

Hey all, I recently wrote a custom select menu using jquery. Basically it acts just like a normal select except you can have multiple columns which act as parents. So for example, if you were having someone select a state to dynamically populate another select of city, this dropdown would have state as a second column to the left of city and run ajax calls to populate the children.

 

It also allows you to select multiple entries from the child, so you can technically grab Chicago, IL; Rockford, IL; Houston, Texas and Miami,Florida all at once. Its pretty cool, im pretty proud of it.

 

The issue is...

 

if the dropdown menu is bigger then a given height (customizable through the options) the div uses overflow to create a scroll to select the hidden results. However in IE 7 this scroll bar only appears half the time. It doesnt make any sense. If I inspect the element, I can see that all the data is there and that the overflow data is simply hidden. SO basically the overflow value of the div is no longer set to auto. If I click away then click back to re-display the selection the scroll bar appears. If I click away and return again, it will be gone. This continues without fail, every other time it seems to lose the overflow property.

 

Any ideas?

[ajlisowski]

Hey all, the code in action can be found here:

 

http://www.ghostjesus.com/multi-select/index.html

 

The odd part is, is in this demo example I can not get the same error to occur. The live version is behind an intranet and what not, so...I cant really show you that one.

 

Basically whats happening is if you were to clikc off of "breakfast" in the top menu and select "lunch" then click back on "pancakes" it would not have the scroll bar. Then if you clicked back on lunch then breakfast it would return. Only in IE 7...

 

I can not reproduce with the demo version I set up, so...it must be something else in my code. Still, any ideas would be wonderful.