vaadin 패널 사이의 거대한 공간

내가 작성한이 코드 조각은 2 개의 패널을 생성합니다. 그 중 하나를 다른 쪽 위에 직접 놓는 것이지만, 문제는 그 사이에 큰 차이가 있다는 것입니다.vaadin 패널 사이의 거대한 공간

아무나 나를 도와 줄 수 있습니까?

코드 :

그것은 당신이 전체 크기로 설정 한 layout의 유형에 따라 달라집니다

 Panel panel = new Panel(); 
     Panel Logo = new Panel(); 

     VerticalLayout layout1 = new VerticalLayout(); 
     VerticalLayout layout2 = new VerticalLayout(); 
     panel.setWidth("500px"); 
     panel.setHeight("300px"); 
     Logo.setWidth("500px"); 
     Logo.setHeight("100px"); 
     Logo.addStyleName(Runo.PANEL_LIGHT); 
     Label label = new Label("test"); 
     label.setWidth(null); 
     Button test = new Button("test"); 
     first.setStyleName("test");; 
     first.setClickShortcut(KeyCode.ENTER, null); 

     layout1.addComponent(test); 
     layout2.addComponent(label); 
     layout.addComponent(Logo); 
     layout.addComponent(panel); 
     layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER); 
     layout1.setComponentAlignment(test, Alignment.MIDDLE_CENTER); 
     layout2.setComponentAlignment(label, Alignment.MIDDLE_CENTER); 
     layout.setSizeFull(); 
     layout1.setSizeFull(); 
     layout2.setSizeFull(); 
     setContent(layout); 
     panel.setContent(layout1); 
     Logo.setContent(layout2);

출처

2014-06-05 user3702643

. layout은 브라우저만큼 확장됩니다. 당신의 layout이 VerticalLayout 인 경우 그 높이는 100 %이지만 높이가 각각 300과 100 인 두 개의 패널 만 있습니다. expand ratio을 지정하지 않았으므로 Vaadin은 화면의 50 %를 panel에 할당하고 나머지 50 %는 Logo에 할당하므로 중간에 큰 간격이 생깁니다. ,

이

가 대신 layout.setSizeFull();를 사용하지 마십시오 layout.setSizeUndefined();
재생을 사용하여 상단 panel 공간을 적게 얻고 Logo이 더 많은 공간을 얻을 수 있도록, 비를 확장

를 해결하려면 두 가지 작업을 수행 할 수 있습니다 : layout.setExpandRatio(panel, 0.2f); 및 layout.setExpandRatio(Logo, 0.8f);. 이 접근 방식의 문제점은 브라우저 높이가 400 픽셀보다 작은 경우 레이아웃이 잘릴 것입니다.

이 개념을 배우는 데는 많은 시련/오류가있었습니다. 계속 진행하기 전에 신중하게 this 페이지를 읽어보십시오.

출처

2014-06-05 19:50:50 Abbas

확장 비율 메서드의 이름을 입력했습니다. "비율"이 아니라 "비율"입니다. – jupenur

도움을 주셔서 감사합니다. layout.setSizeUndefined(); 트릭을 만들었지 만 구성 요소가 모두 왼쪽에 고정되어 정렬이 작동하지 않습니다. 왜 그런지 알아? – user3702643

부모님 ('layout1'과'layout2')은 풀 사이즈, 즉 너비와 높이가 100 %이기 때문입니다. 이를 수정하기 위해서는'layout1'과'layout2'의 크기를 정의하지 말아야합니다 ('layout1.setSizeUndefined();'). 또한 어쨌든'layout1'과'layout2'는 정말로 필요하지 않다고 생각합니다. 'layout' 바로 아래에'panel'과'Logo'를 추가하십시오. – Abbas

이 작업을 수행하는 방법에는 두 가지가 있습니다

@Abbas 말했다으로 사용

layout.setExpandRatio(panel, float);
또는 CSS 파일에 속성을 추가 할 수 있습니다

layout.setStyleName("my-layout");

CSS에서

당신은 추가

.v-verticallayout-my-layout .v-slot{ 
    height: auto !important; 
}

이이 일을 할 것입니다. 나는 두 가지 방법을 모두 시도해 보았고 효과가 있었다.

출처

2014-06-06 07:32:09 deltascience

vaadin 패널 사이의 거대한 공간

답변

관련 문제