Start Building Professional
Web Apps Today

Missing cursor in Grid fields within a Tabbar in Firefox

I am trying to a dhtmlxTabbar with multiple tabs and each tab contains a dhtlmxGrid. This works fine in IE, but in Firefox, the cursor is not displayed in the editable cells of most of the grids. I have done a lot of experimentation in order to isolate the problem. Here is what I have found:

I create 4 Grid components, then I call tabbar.setContent() to add one grid to each tab. I have found that the last grid to be added to the tabbar will display the cursor properly, but all previously added grids will display no cursor in the editable fields.

For example, if I do this:
tabbar.setContent("a1","grid1");
tabbar.setContent("a2","grid2");
tabbar.setContent("a3","grid3");
tabbar.setContent("a4","grid4");
tabbar.setTabActive("a1");

I will only have a cursor on grid4 on the fourth tab and grid1, grid2, and grid3 will have no cursor.

However, if I do this:
tabbar.setContent("a4","grid4");
tabbar.setContent("a3","grid3");
tabbar.setContent("a2","grid2");
tabbar.setContent("a1","grid1");
tabbar.setTabActive("a1");
only grid1 will show a cursor and the other three will not.

I have noticed that you said that there is a rendering bug in FF relating to the overflow style setting. There is nothing I can do to affect that since I am just creating grids and adding them to tabs. This appears to be something internal to the tabbar code.

Based on my initial testing, I am quite impressed with these controls. They are quite easy to use and seem to work well! Thanks.

It seems the same bug in FF to which you reffer.
The tabbar use visibility:hidden to hide invisible tabs, so while they are not visible, browser still include them in calculations and can produce mentioned bug, you can try next

a) use different hiding model
    tabbar.enableForceHiding(true)
it switch to different hiding routine and must resolve most glitches in IE and FF

b) if previous not work - please try to include between tab and grid container (gridN) some other div container with overflow:auto;

Thanks for the answer, option a) solved the problem. Thanks again.