Start Building Professional
Web Apps Today

ComboBox - Missing Scrollbar

This is an IE6 & IE7 issue when in STRICT mode. It may occur in other situations as well; we only test in IE6/7 at this time.

We have a combobox that has had some odd behavior. When the combobox is first clicked on, the resulting list area would not include a scrollbar even when it should have. Even during debugging, the scrollHeight value of the list area was registering as needing a scrollbar (scrollHeight=108px when pixelHeight=100px), yet it wouldn't display. When we blurred the field and refocused on it, the scrollbars would appear and continue to function correctly until the page was reloaded.

We have implemented a fix which, for us, actually improves the usability of the combobox. The change causes the "height" property of the list area to act as a "max height" value. If the number of options in the list can fit within a smaller area than the height defined, then the list area will shrink to it's required height. If the number of options in the list exceeds the height allowed, then the area will respect the height and a scrollbar will be shown as normal.

To accomplish this, two lines of code were modified in dhtmlxcombo.js:

Line 58 - Inside the "openSelect" prototype after the display of the DOMlist element is set to "block", the following was added:

...display="block";if(this.DOMlist.scrollHeight>this.DOMlist.currentStyle.maxHeight){this.DOMlist.style.height=this.DOMlist.style.maxHeight;this.DOMlist.style.overflowY='scroll'}else{this.DOMlist.style.height=this.DOMlist.scrollHeight};this.callEvent(...

Line 60 - The "_IEFix" prototype was adjusted to correct the height of the iFrame:

...DOMlist.style.top;this.DOMlistF.style.height=this.DOMlist.style.height;this.DOMlistF.style.left...

Also, one change was made to dhtmlxcombo.css:

Line 41 - Replaced "height" attribute with "max-height" attribute in the ".dhx_combo_list" class:

...
border:1px solid black;
max-height:100px;
background-color: white;
...

In theory, the max-height attribute alone should have been enough to get the same result in IE7, but there are challenges getting such to work. And since IE6 doesn't support max-height, this is a safer solution for IE. Note that other browser have differing support for scrollHeight, so this solution may need to be made cross-browser compliant...

Thanks!
- David Hutchings
CaseCentral, Inc.

Thanks for interesting idea, we will look how it can be incorporated in our existing code.