TextField rendering issue


I was looking for a better notification system for my project and tried Notifique addon a few weeks ago.

Along with the addon, I included Overlays and Animator APIs to my project, as suggested on the addon page. At first, the code was added to my login window, so I could test it without changing the code on the main window, which is loaded upon sucessful authentication.

I noticed, however, that my login window was affected by a small issue: the TextField component was not rendered correctly on the browser. Furthermore, TextFields placed on my main window were also affected.

Even though I explicit set TextField’s width and height, the bottom part of the component is not shown. I have included a screen capture of the component rendering on Firefox, so you can understand what is going on.

To avoid this issue, I removed Notifique, Overlays and Animator JARs from my project, and also removed its declaration line from widgetset.gwt.xml and recompiled it.

Strangely, the issue continued to appear. I tried switching themes, starting with a new theme from scratch. I also updated vaadin.jar from 6.8.1 to 6.8.4, but got no luck with that.

What I can tell you now is that this issue does not appear when using CssLayout. When the layout is Vertical/HorizontalLayout, the issue is there.

I read complaints about Overlays addon messing up the project’s CSS. Has anyone ever faced a similar issue?

If so, I kindly request your help. Otherwise I will have to start a new project from scratch.

Any help is appreciated. Thanks…

Sounds very odd that even after removing all add-ons from the project the error persists. Did you clear the server and browser cache properly, just to make sure it’s not that?

The problem itself might be something related to the textfields’ caption elements’ style. Check that you are not adding any top/bottom padding to either v-caption or v-captiontext elements.


Thanks for your promptly response. You are right… Such a silly mistake. I added a margin to .v-captiontext and it messed up the TextField component styling.

Notifique, Overlays and Animator addons have no relation to this issue, which is solved now.