TextArea bleeding in Chrome

I am experiencing odd behavior with TextArea and Table components in a TabSheet bleeding onto the TabSheet parent in Chrome. I’ve tested Chrome versions 27 - 30 on Windows and Linux.

The component hierarchy is this:

CssLayout
|_ _VerticalLayout
|__TabSheet
|__FormLayout
| TextArea
| Table
| ComboBox
| DateField

Oddly, the bleeding occurs when a ComboBox or DateField is selected. I’ve attached 2 files to demonstrate “before” and “after”. I am extending Reindeer, and I am using CssLayout to at the top level of my project.

I realize it would be a lot of work for anyone to determine exactly where I’ve gone wrong. I’m simply trying to find out if anyone has experienced this behavior, or might be aware of a condition which tickles z-index properties when selecting ComboBox or DateField components.

Any feedback is greatly appreciated… even if it means starting from scratch.

Thank you!
13262.png
13263.png

This looks very strange. I suspect this is related to your theme - either a direct problem in the theme or the theme triggering a browser bug.

Try using the application with the plain reindeer theme (you might be able to do that by adding “?theme=reindeer” to your URL when not in production mode) to see if the problem still appears. Also check what CSS your CssLayout uses and if deactivating parts of it in source code or using browser debug tools eliminates the problem.

Thank you, Henri. I was not aware of the theme query string parameter. Setting “theme=reindeer” does work, but I am still experiencing the same odd behavior. The attachment demonstrates my problem using the reindeer theme.

I will debug this in an empty UI, ie no CssLayout/no custom CSS, and report back my findings.

Thanks again.

13265.png

I’ve resolved this issue. I failed to mention that my layout was wrapped in a panel that I used to format all views. I simply removed the panel and took a different approach to format my views. My “bad” code is below… nesting all of my layouts within the content of a panel seemed to trigger this difficulty in Chrome.

// create container for views
Panel navPanel = new Panel();
navPanel.setSizeFull();

// init navigator views
Navigator navigator = new Navigator(this, navPanel);