I am trying to track down a bug with a custom component of mine. It is currently displayed in a Form that is shown in a popup. When I first create the Window and plug the Form into it the custom component works fine.
I then close the Window.
Then I try again, and this time the Window opens fine, but my custom component is not displayed, though the caption for it is visible. When I run Firebug, it seems that my component is in a “grayed out” DIV.
If I open the same Form in a separate browser window instead of a popup window, it displays correctly.
So, there is something about when I first create the component in a popup window (or in the main window or another browser window), but is then not visible/enabled/sized correctly if I open another popup window. Yet even when it no longer will work in a popup window, if I open the Form in the main window or in a new browser window, it works fine.
What should I be looking for to help troubleshoot this issue?
Is there anything special I need to do with popup windows when they close? I do see my ‘detach’ being called, so the framework seems to know it goes away. And when I re-open the popup, I can see my component in the DOM, it’s just not visible.
It seems to be related to the DOM calculations that our outside of my component that is doing this.
When I first open the popup window, just under the VerticalLayout’s DIV, it looks good like this:
When I open the popup the second time, it then is changed to this “bad” set of DIVs:
So, I am not doing anything different between the two calls to create my Form and custom component, but one time the sizes are all known, and the second time it’s as if my component has no size.
While investigating a modal window issue with editor’s own modal dialogs, I discovered that this Window bug is only on Firefox 3.6.11 (the version I have). It appears that the popup windows work fine with CKEditor in IE8, Chrome 7, Safari 5 and Opera 10.
Hopefully that helps since it’s something to do with Firefox alone.
Does anybody working on Vaadin (or perhaps Chameleon theme?) have any ideas how I can test this further on Firefox 3.6? It’s the only browser that has problem.
I am able to open a popup Window that contains a CKEditor repeatedly on all other browsers. I found I had to increase the z-index for CKEditor on IE and Chrome otherwise it would allow me to re-open the popup window exactly twice before it would render the editor, but then the dialogs/select boxes of the editor would stop working. I changed the z-index to 32000 and that resolves that issue on IE and Chrome.
But FF still suffers the fact that the first time I open a popup window, the editor appears, but then it doesn’t anymore, though if the editor is shown in a regular panel on the main window, that works fine. But it requires the popup to have occurred, since I can make the editor appear over and over in panels in the main window, so loading and reloading the editor works fine even on FF, until a popup window is created with an editor. That will only work the first time, then all other times it fails to be shown (see above posting for DOM DIVs that show the editor is there, just that Vaadin doesn’t give it any size).
Found this work-around makes it work on Firefox (FF) as well as IE, Opera, Safari and Chrome. In my ‘v’ Widget class, I set the visibility of the newly created DIV and that does it:
DivElement rootDiv = Document.get().createDivElement();
rootDiv.getStyle().setOverflow(Overflow.AUTO);
rootDiv.getStyle().setVisibility(Visibility.VISIBLE); // required for FF to show in popup windows repeatedly
setElement(rootDiv);
Not sure why this is the case that my editor’s DIV is created non-visible in FF, but only in a popup window. In a regular panel on the main window, this was not a problem even with FF. And of course none of this oddity occurs on any other browser.
Go figure! Hope my travails help others, or can help Vaadin with a fix if it’s somehow related to it. Right now, I’d just guess this is an oddity of FF.