TabSheet calculates a wrong height for some tabs

Vaadin 6 / 7 / 8
1

Hi All,
I’m developing a report that is a TabSheet and each tab is a
VerticalLayout
with other elements inside.
Now, the problem is that for one tab the height is set incorrectly.

This is what appears to me when I add the tab report to the UI:

And this is what it should be:

The above tab is a
VerticalLayout
containing:

  • 1st component: a
    HorizontalLayout
    with three buttons;
  • 2nd component: a
    Grid
    with some headers
  • 3rd component: a
    HorizontalLayout
    with 2 buttons another
    HorizontalLayout
    for the paging, a Label and a Slider.

The fun fact is that when I click the top right button that opens a
PopupView
the tab is resized to the correct height but if I switch to the other tabs and I go back the first tab is
shrinked
 again. The other tabs are just VerticalLayouts wiith charts and are shown correctly.

I add the VerticalLayout using the method
addTab(Component c, String caption).

The
A Grid Tab
's VerticalLayout has
setSpacing(true)
 and
setSizeFull()
. I tried to set remove
setSizeFull()
 or to put
setSizeUndefined()
 but nothing changed.

Am I doing something wrong or this is a potential bug?
Thanks in advance.

2

Maybe analyze layouts might find some issues in your layout sizes.

  1. add ?debug to the end of your url, like: http://demo.vaadin.com/sampler/?debug
  2. click on the tree icon 'Examine component hierarchy"
  3. click third icon “Check layout for potential problems”

That will give you a list of sizing issues if there are any. like having a relative sized layout within an undefined one. If it answers to you “Layouts analyzed, no top level problems” then the problem is probably somewhere else.

3

Hi Jens,
thanks for the reply. I checked with the debug and I think that the problem is the VerticalLayout withouth defined height that contains elements with defined height.

Playing around trying to fix it I saw this on the debug window:

What’s this
[93]
NOT FOUND
?

4

Yes, your assumption sounds correct. You probably have a panel with setHeight(null), which is default, and the layout in panel.getContent() has height 100%. 100% of “undefined height” isn’t solvable. In other words panel says that it should be exactly as high as it’s layout needs it to be, while the layout says that it should take all the space that the panel gives it. Both are saying to each other “you decide”. Also it’s children of the layout seem to have height 100% and that’s why you are getting a whole tree in the picture - the problem flows further.

The not found thing is curious. I checked from the sources on what it tries to do. the 93 is an id for a component, like above 11 is for PanelConnector, 22 for LabelConnector etc. Basically when you press the “analyze” button in the browser, it sends an event to the server which does the analyzing. The server tests the layout and gather a list of all problems, consisting of component id and description of problem. This list is sent back to the browser for printing out in the window. For each error, browser checks which component has this id. 11 is a PanelConnector, 22 is a LabelConnector etc. Then it gets to an component id 93 with a problem, but it doesn’t know of any component with id 93. That is why it prints out “NOT FOUND” instead of an informative message.

The server component hierarchy and client component hierarcy should always be in sync and this case that you have should never happen. That might be why it has a very non-descriptive error message. I’m wondering if this is a symptom of the sizing problems that you have higher up in the list, or a problem of it’s own. If I would be you I would check the heights in this view first and try to fix those. When you get those errors away, then see if the “not found” resolves itself.

5

After many tries still I didn’t manage to fix the tab. What I tried is to set a fixed height to every element in the main VerticalLayout and at the end to set the sum of these heights as height of the layout itself.

Example:
VL: —> height: sum of the single heights

  1. label —> height: 25px
  2. HL —> height: 38px
  3. grid —> height: 150px
  4. HL —> height: 38 px

The problem is that when I set a fixed height to the layout instead of seeing everything in order I’ve some components overlapped, this happens because every components has by default the expand ratio to 1, this way every element obtains a
height: 25%
 (because in this case the elements are 4) that ruins everything.

What am I doing wrong? Is it possible to disable the expand ratio?

6

That’s not a very stable way of going, specifying exact pixel sizes for everything.You should let Vaadin count the sizes when possible.

I see that you have two ways of implementing this. Go full size all the way or go undefined all the way.

  1. Fullsize:

[code]
Tabsheet: height: 100%;
±- VL: height: 100%;
|-- HL: height: null
|-- grid: height: 100%;
±- HL: height: null

VL.setExpandRatio(grid, 1);
[/code]In this case, the HL’s will reserve just as much space as needed, and grid will take as much space as it is given. with the expandratio defined, VL will give the grid all the space left after the HL’s has taken what they need.

  1. Undefined:
Tabsheet: height: null;
+-- VL: height: null;
    |-- HL: height: null
    |-- grid: height: 150px;
    +-- HL: height: null

VL.setExpandRatio(grid, 1);

In this case, you define undefined all the way and a pixel size for grid. This means that everything will be as small as possible, tabsheet included. The Grid is the exception because you wouldn’t see any rows if the height of the component would be zero.
(I’m a bit wondering if it was okay to define a undefined height to tabsheet. I think you can, but I don’t have a dev environment up to test this on the computer I’m sitting at right now.)

Both of these cases are okay. The only rule that comes to mind right now is that you can’t have % height within a null height. In the example above the null height is inside the % height, and that way is okay. You have to remember this rule all the way up to the UI level - no level between the Tabsheet and the UI can have undefined height to make that work. You probably also want them to be 100% all the way, to make a nice full screen (/browser) app.

7

If your grid has HeightMode.ROW , then this is probably the same bug reported a year ago :


Forum post here


https://dev.vaadin.com/ticket/17957

8

@Jens: Thanks, I’ll try your suggestions.
@Mr Sandals: yes, my grid has HeightMode.ROW, the bug could be related

9

Problem solved finally!
I set the heights in fullsize mode as Jens suggested and the problem was still there so I just commented
setHeightMode(HeightMode.ROW)
and everything is fine now.

Thanks to both for the replies, would be
great
if someone will add a
note
in the documentation related to this
bug
because I lost many days behind it and I don’t think I’m the only one (of course the bug solved would be even better :D).

10

@Jens: the
[93]
not found
 is still there, the debug windows says that the shown components are 89 and the UIconnector is 99 so seems that this 93 is something created by the client engine