Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
TabSheet calculates a wrong height for some tabs
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.
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.
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  NOT FOUND?
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.
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.
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?
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.
Tabsheet: height: 100%; +-- VL: height: 100%; |-- HL: height: null |-- grid: height: 100%; +-- HL: height: null VL.setExpandRatio(grid, 1);
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.
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.
@Jens: Thanks, I'll try your suggestions.
@Mr Sandals: yes, my grid has HeightMode.ROW, the bug could be related
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).
@Jens: the  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