Why splitter of HorizontalSplitPanel is not reaching the bottom of the page

Vaadin 6 / 7 / 8
1

I am using HorizontalSplitPanel (
https://vaadin.com/docs/-/part/framework/layout/layout-splitpanel.html
) to divide a layout into two partitions. Top layout is layout with navigation buttons.
Left panel is treeTable and the right one is a layout with textfields, textarea etc.

I use in this application Vaadin 7.5.8

Why splitter is not reaching the bottom of the page?

Here is code:

public class MyView extends VerticalLayout implements View {

HorizontalSplitPanel mainHSplitPanel = new HorizontalSplitPanel();
VerticalLayout layout = new VerticalLayout();
TreeTable baseStructure;

{
layout.removeAllComponents();
layout.setMargin(true);

final TreeTable baseStructure = new TreeTable();

mainHSplitPanel.setSplitPosition(30, Unit.PERCENTAGE);

layout.setSizeFull();

layout.addComponent(initTopLayout());

layout.addComponent(mainHSplitPanel);

panel.setContent(layout);

VerticalLayout baseStructureLayout = new VerticalLayout();

baseStructureLayout.addComponent(baseStructure);
mainHSplitPanel.setFirstComponent(baseStructureLayout);

mainHSplitPanel.setSecondComponent(detailsLayout);
detailsLayout.setSpacing(true);

UI.getCurrent()).setContent(panel);

}}

and attachemnet with screenshot

2

Here is screenshot in attachment.
33502.png

3

There’s something missing from your code sample. But as far as I can tell, the Panel that’s here:

UI.getCurrent()).setContent(panel);

… is not full size.

4

Of course (where MyUI is vaadin start class) :

((MyUI) UI.getCurrent()).setContent(panel); I would like the splitter to reach the bottom of the page and the TreeTable was on the left hand side so that it would be depending on the Treetable level (ie the row) on the right hand side to load the appropriate form

like here:
https://demo.vaadin.com/sampler/#ui/structure/horizontal-split-panel

5

I think there is something more missing.
There is the mainHSplitPanel but the

((MyUI) UI.getCurrent()).setContent(panel); is set, so panel is the mainHSplitPanel?

As far as is see and like Olli Tietäväinen said, there are one or more

x.setSizeFull(); missing. In your code i don’t see mainHSplitPanel.setSizeFull(). If panel != mainHSplitPanel take care, that the panel is full size. Your view extends VerticalLayout but it is not used? If it is used you should set this.setSizeFull().
At least you can analyze your website with chrome devtools or firebug and take a look which component is not full size.

6

You can also use debug mode (add ?debug to the URL) to check which is the component that is the bottom-most of your hierarchy. Make sure that component is full size.

7

addComponent(initTopLayout()); addComponent(mainHSplitPanel); ((MyUI) UI.getCurrent()).setContent(mainHSplitPanel); baseStructure.setSizeFull(); mainHSplitPanel.setFirstComponent(baseStructure); mainHSplitPanel.setSecondComponent(detailsLayout); I removed the panel and left the HorizontalSplit Panel. I now have a TreeTable on the whole page on the left hand side , but I do not have a top layout with buttons. It seems mainHSplitPanel covers the top layout with buttons (initTopLayout method)

8

Here attachemnet with screenshot. Top layout was disappeared.
33503.png

9

I think the top layout was in the panel you removed. Try adding it back again, and call setSizeFull on it first.

10

It would be a lot of writing to show you all my trials. This has been set for several hours and unfortunately has no effect.
I added top layout and I sure it is not removed. I think mainHSplitPanel covers the top layout with buttons, but I have no idea not to cover up it

Here about problem with Vaadin panels and layouts in Polish
https://koziolekweb.pl/2013/09/25/panele-i-layouty-w-vaadin-czyli-na-chuj-mi-ten-wrzatek-laaaaa/

The author of this article says that the default panels can therefore only store one component, and if we want to embed more components there, we need to use a “ladder”, that is, in the panel to embed the layout, and in the layout of our components.
Is this true?

Does this mean that I insert a panel and it fills in all available space and does not allow to place another layout. I mean the method
setConent
 ((MyUI) UI.getCurrent()).setContent(mainHSplitPanel);

11

If you can put the whole app up somewhere, e. g. GitHub, I can take a look. Otherwise it’s not really easy to tell what’s happening.