Layout positioning

Hi,

following up in vaadin exploration, I’m trying to achieve a simple result:

but what I get is:

In the UI class I have a

setContent(new MainLayout());

and MainLayout is as follows:

public class MainLayout extends VerticalLayout {

private VerticalLayout upperSection = new VerticalLayout();
private HorizontalLayout lowerSection = new HorizontalLayout();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();

public MainLayout() {

      setSizeFull();
      lowerSection.setSizeFull();
      menuLayout.setSizeFull();

// contentLayout.setSizeFull();

//
// Adds layout parts
//
upperSection.addComponent(new Label(“Header”));
menuLayout.addComponent(new Label(“Menu”));
contentLayout.addComponent(new Label(“Content”));

      lowerSection.addComponent(menuLayout);
      upperSection.addComponent(contentLayout);
    
      addComponent(upperSection);
      addComponent(lowerSection);
      
      setExpandRatio(lowerSection, 1);

//
// Makes Borders visible
//
showBorders();
}

private void showBorders() {

//
// Adds a built-in CSS class to the layouts
//
String style = “v-ddwrapper-over”;
setStyleName(style);
upperSection.setStyleName(style);
lowerSection.setStyleName(style);
menuLayout.setStyleName(style);
contentLayout.setStyleName(style);
}
}

What did I did wrong?

Thanks

Francesco

Could you try without the ‘v-ddwrapper-over’ stylenames? That’s really not what you should be using for styling components, it’s only meant for showing drag-n-drop hints when you drag components. Those styles might mess up the layout styles, I’m not totally sure.

Hi,

commenting out showBorders(), the result is:

While I’d expect something like

Header
MenuContent

if I’ve understood the princiles correctly.

I’ve atached the project, if you want to test it out.

Ciao and thanks

13515.zip (13.4 KB)

Solved.

      lowerSection.addComponent(menuLayout);
      upperSection.addComponent(contentLayout);

has to be

      lowerSection.addComponent(menuLayout);
      [u]


lower

[/u]Section.addComponent(contentLayout);

Thanks anyway

Ciao

Hello:

I’m trying to prove the same example as Francesco . But showBorders () it does nothing. does not apply any style. What can I be doing wrong ?

20951.java (1.02 KB)
20952.css (298 KB)
20953.java (825 Bytes)

hi, try this.
https://vaadin.com/forum#!/thread/9286380

.border {
border: 2px solid #1d9dff;
background-color: #bcdcff;
padding: 0;
}