設定された幅を維持しながら反応するCSS

Question

ここでCSSとvaadinの両方を使用しているアマチュアは、VaadinでレスポンシブなUIを実装しようとしていますが、UIオブジェクトの幅の設定に問題があります。すべてが反応的なCSSを破るようです。相続人は、私が説明してるものの例：

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); 

をそしてfiltTypeLabelに適用される対応する応答CSSブロック：以前のコードで

/* ---- 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; 
    } 
}