An Ext JS, a beautiful Javascript Library, ComboBox on a Toolbar fails to display when the browser window is resized or there is another div with 100% width. The problem is most likely related to resizing of the Toolbar which causes the ComboBox to stop displaying.

There are several ways in which the defect can be demonstrated like mouseover over other UI components on the toolbar, opening the ComBox to display the elements etc. But the easiest way to reproduce is to resize the window.

Reproducibility:
The defect can been consistently (100%) reproduced on IE 6 but never on IE 5.5 or Firefox.

Demo code:
You can view the demo code at http://taragana.com/downloads/extjs/
Open it in IE and then resize the window.

Partial workaround:
Assign a fixed size to the ToolBar when in IE.

Jack Slokum, author of ExtJS library, has kindly pointed me to three solutions:

Here are a couple workarounds you can try:
- Apply the style zoom:1 to the toolbar.
- Remove the strict doc type (and fix a lot of IE bugs).
- Worst case, apply a height to the toolbar div.

He said that it is a defect with IE 6.

BTW: I am impressed with his quick response, not to mention the wonderful library he created.

My experience with the workarounds are:
1. I tried to apply zoom: 1 style to the toolbar div as follows:
Code:


It still made it invisible. However on clicking in that area, it became visible again.
2. I changed the height to several values in the style. However it didn't help.
3. I removed the strict doc type too without any help.

You can follow the discussion here.

Update: Jack Slokum pointed out that the zoom fix needs to go into the x-toolbar (see below for an example). It works like a charm. I have removed my previous fix of fixed tollbar width in favor of this fix.



He also mentioned that he has added this fix to the default stylesheet to workaround this issue for the next release. Not only now I am impressed with the library but also his responsiveness to problems. Thanks Jack.