Overlapping components

I have a header (separate class) in my application. When I enter a view (this concerns vaadin 7) containing a TabSheet the tab sheet gets on top of the header (as in the attached picture). This only occurs when I enter the view with a TabSheet. All other views appear normally. Does anyone know what the problem might be? All views gets rendered in the ComponentContainer underneath the header and the header is standalone from the view rendering.


That looks odd. It’s hard to say anything without knowing much more about the component hierarchy and settings. Something like that could perhaps be caused by invalid way of setting heights in the header, or something. It’s even more odd if it only occurs with TabSheet.

What is the ComponentContainer you speak of? A Panel? I’d assume that you have VerticalLayout as root layout, in that the header and the Panel or something. Is the VL set to full size? In that case, the panel or whatever would probably be set as expanding, while the header is not. That would be a rather normal situation, I would think. How is the header composed?

One common cause of such trouble is having a relatively-sized component inside a layout with undefined size. You can
analyze such problems in the debug window

The componentContainer in which the views get rendered is a VL. this VL is attached to the same VL as the header. The VL where the views get rendered is set to SizeUndefined and width=100% (this was after I was recommended to do so after having had problems with panel scrollbars in views). The VL on whichthe view rendering VL is attached is set to full size. The header is a VL with 100% width and 50px height.

Thanks for any help

So you have something like: VerticalLayout (header, VerticalLayout (TabSheet)).

What is the height of the TabSheet? Is the view-VL set as expanding?

The view-VL having undefined height sounds like a source of trouble, although the overlapping is not what I’d expect. The undefined height will cause it to overflow the full-sized content root VL. Overflowing is one way to get scrollbars, but can cause trouble if you don’t do it exactly right. I don’t see why would you want to have vertical scrollbar inside the content root rather than the regular page scrollbar.

The height of the tabsheet is not set, the width is set to 100%. The classes representing each tab are set to SizeFull.
The view-VL is set to expanding accordingly:

primary.addComponent(userActionsPanel); primary.addComponent(content); primary.setExpandRatio(content, 1f); where content is the view-VL (primary is the right part of my application, the left part consists of a menu)

If the TabSheet with undefined height has tab components with 100% height, that violates the rule to not have relatively-sized components inside a layout with undefined size (in vertical direction in this case). The Analyze layouts functionality in the debug window should reveal that problem.

Thank you! I will test that and get back to you.