[RESOLVED] ComboBox Visibility Problem in IE 6: ExtJS 1.1 Beta 2

[angsumanc]

Hi,

First of all I want to thanks Jack Slokum & his team for the excellent library. This is my first active venture into the forum.

Bug Report
------------
Summary:
A 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.

Note:
I searched for all the defects in the bugs sub-forum as well as searched the entire site but couldn't find it reported elsewhere. If by any chance I missed it, I would appreciate a pointer to the url where it has been solved.

[jack.slocum]

This is a bug in IE, not Ext JS.

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.

[angsumanc]

Originally Posted by jack.slocum

This is a bug in IE, not Ext JS.

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.

Thanks for your quick response.

1. I tried to apply zoom: 1 style to the toolbar div as follows:

<div id="toolbar" style="zoom: 1"></div>

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.

Maybe I am missing something obvious. Can you please post a sample?

[jack.slocum]

Actually zoom:1 needs to go on the x-toolbar element:

<style type="text/css">
.x-toolbar {
    zoom:1;
}
</style>

In the next release, I have added this to the default stylesheet to workaround this issue.

[angsumanc]

Thanks for the zoom fix. It works like a charm.

[andreros]

Hi guys,

after reading this thread to the end I still can't manage to get this working. I have a really annoying bug here. I create a Ext.form.ComboBox and load it with a Ext.data.SimpleStore. If I render the ComboBox anywhere, fine, but if I render it inside a Toolbar, the following happens to me:



It simply doesn't load the data. Of course, before I posted this here, I tried to create it outside the toolbar (actually on a blank page with no extra divs) and it renders just fine :



This was all developed and tested on Firefox 2.0 with Firebug. Only one remark here, this was developed with ExtJS 2.1 (and not Ext 1.1 Beta 2).

Any ideias? Thanks in advance.

[SlasherZ]

Hi,

I have the same problem..

I have a tbar and a bbar...

In the bbar there is a comboBox that doesn't display values..but when I remove the tbar the comboBox in the bbar displayes the values..

Help?!

[imranbaig]

I have been facing the same problem that if the scenario occurs that tbar and bbar both are added to a form, the values of combobox would not be visible if combobox is placed in bbar.
I tried a lot to find the solution on internet but could not find any.
After playing with different options I found that if I add a panel or event an empty element either in tbar or in bbar the combobox begin showing its values.
But it gives slight unwanted behavior that it adds a button at the end of toolbar which become visible when mouse hovers on that, it is just because that default item type of toolbar is button so when we add an empty item it makes it button, to remove this unwanted button we can set its display to none.
The code is shown below:
,{style: 'display: none'}

Cheers,
Imran Baig

[imranbaig]

I found another cause for displaying empty space instead of displaying actual values, and I would like to share it with you guys.
The problem occurs if the displayField you set in the combobox config fields, is not present in the store, which you are binding with combobox.
Thanks,

[imranbaig]

[FONT=Calibri][SIZE=3]While working on ExtJs, I found some other reasons for not to displaying data in ExtJs ComboBox, and after spending so long time I found that it also causes when we don