Search code examples
javajakarta-eevaadinvaadin7splitter

Create layout with nested HorizontalSplitPanel and VerticalSplitPanel in Vaadin

I am new in vaadin and trying to set basic layout. Here is my code:

    //a label
    public static final String brownFox = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. ";

@Override
protected void init(VaadinRequest request) {

    VerticalLayout layout = new VerticalLayout();
    setContent(layout);

    // First Main horizontal split panel
    final HorizontalSplitPanel horizontal1 = new HorizontalSplitPanel();
    horizontal1.setHeight("100%");
    horizontal1.setSplitPosition(20, Sizeable.UNITS_PERCENTAGE);
    layout.addComponent(horizontal1);

    // add a label to the left area
    horizontal1.setFirstComponent(new Label(brownFox));

    // Second main horizontal split panel
    final HorizontalSplitPanel horizontal2 = new HorizontalSplitPanel();
    horizontal2.setHeight("100%");
    horizontal1.setSecondComponent(horizontal2);
    horizontal2.setSplitPosition(80, Sizeable.UNITS_PERCENTAGE);

    // First main vertical split panel
    final VerticalSplitPanel vertical1 = new VerticalSplitPanel();
    vertical1.setWidth("100%");
    horizontal2.setFirstComponent(vertical1);

    vertical1.setFirstComponent(new Label(brownFox));
    vertical1.setSecondComponent(new Label(brownFox));
    vertical1.setSplitPosition(50, Sizeable.UNITS_PERCENTAGE);
    horizontal2.setSecondComponent(new Label(brownFox));}

And rendered layout is:

enter image description here

The problem is second component and splitter of VerticalSplitPanel. The label is hidden and splitter isn't in the middle of screen.

Thanks for any help.

Solution

  • A VerticalLayout is by default auto/undefined height, so set it to 100% to take all the available space in the UI.

    @Override
protected void init(VaadinRequest request) {

  VerticalLayout layout = new VerticalLayout();
  setContent(layout);
  // Add this
  layout.setHeight("100%");

  // The rest is the same
  ...