설정 한 너비를 유지하면서 반응하는 CSS

Question

아마추어와 CSS 모두 여기에 Vaadin에서 반응 형 UI를 구현하려하지만 UI 객체의 너비 설정에 문제가 있습니다. 모든 것이 응답 성 CSS를 깨는 것 같습니다. Heres는 제가 설명하고있어 예 : 해당 반응 CSS 블록이 filtTypeLabel에 적용

CssLayout filterTypeLOptimiseBLayout = new CssLayout(); 
    filterTypeLOptimiseBLayout.setResponsive(true); 
    filterTypeLOptimiseBLayout.addStyleName("flexwrap"); 
    filterTypeLOptimiseBLayout.setSizeFull(); 

     Label filtTypeLabel = new Label("Filter Type Filler"); 
     filtTypeLabel.addStyleName("filtTypeLabel"); 
     filtTypeLabel.setSizeFull(); 
     filtTypeLabel.setResponsive(true); 
     filterTypeLOptimiseBLayout.addComponent(filtTypeLabel); 

을 그리고 예상대로 이전 코드와

/* ---- Filter Type Filler Label ------*/ 
    //Basic inherited CSS 
    .filtTypeLabel { 
    padding: 5px; 
    } 

    //Mobile 
    .filtTypeLabel[width-range~="0-300px"] { 
    font-size: 12pt; 
    margin: 5px; 
    } 

    //Small Browser 
    .filtTypeLabel[width-range~="301px-600px"] { 
    font-size: 14pt; 
    margin: 10px; 
    } 

    //Big Browser 
    .filtTypeLabel[width-range~="601px-"] { 
    font-size: 16pt; 
    margin: 20px; 
    } 

, 나는 버튼 폰트와 여백의 확장을 달성 ,하지만 레이블의 너비에 대한 컨트롤을 원합니다. filtTypeLabel.setSizeFull();을 사용하면 레이블이 모든 공간을 수평으로 차지하기 때문에 레이블과 동일한 줄에있는 모든 문자가 다음 줄로 넘어갑니다. filtTypeLabel.setWidthUndefined();을 호출하면 반응 형 스케일링이 깨지고 filtTypeLabel.setWidth("5%");도 깨집니다. CSS에 max-width과 min-width을 설정하면이 설정도 해제됩니다.

응답 성 CSS 사용 가능 객체에 설정된 너비를 적용 할 수있는 방법이 있습니까?

Answer 1

너비 범위 검사는 창 크기가 아닌 특정 구성 요소에서 작동합니다. 따라서 구성 요소의 크기가 항상 동일한 경우이 검사는 항상 동일한 결과를 표시합니다. 그러한 구성 요소를 응답 성 있고 너비 범위 스타일로 만들어야합니다.이 스타일은 창 크기에 따라 크기가 변경됩니다. 그리고 모든 반응이있는 아이들은 아이 스타일을 가져야합니다.

CssLayout filterTypeLOptimiseBLayout = new CssLayout(); 
    filterTypeLOptimiseBLayout.setResponsive(true); 
    filterTypeLOptimiseBLayout.addStyleName("flexwrap"); 
    filterTypeLOptimiseBLayout.setSizeFull(); 
    filterTypeLOptimiseBLayout.setResponsive(true); 

.flexwrap { 
    .filtTypeLabel { 
    padding: 5px; 
    } 
} 

//Mobile 
.flexwrap[width-range~="0-300px"] { 
    .filtTypeLabel { 
    font-size: 12pt; 
    margin: 5px; 
    } 
} 
//Small Browser 
.flexwrap[width-range~="301px-600px"] { 
    .filtTypeLabel { 
    font-size: 14pt; 
    margin: 10px; 
    } 
} 

//Big Browser 
.flexwrap[width-range~="601px-"] { 
    .filtTypeLabel { 
    font-size: 16pt; 
    margin: 20px; 
    } 
}