私は複数のコンボボックスをページ全体に持っています。そして、私が敏感になりたいコンボボックスが1つあります。Vaadin。コンボボックスに応答するポップアップウィンドウ
public class MyLayout extends CssLayout ... {
...
void initLayout {
displayBoxFilter = new ComboBox();
displayBoxFilter.addStyleName("displayBoxFilter");
}
}
と私はこのようなCSS持っている:
のは、私はちょうどこのように、それを含むレイアウトを持っていると仮定しましょう
.MyUI {
...
.displayBoxFilter {
color: red;
}
}
.MyUI[width-range~="0-767px"] {
...
.displayBoxFilter {
color: blue;
}
}
をしかし、私はこれを行う、唯一のコンボボックス・キャプション色着替える。しかし、私はまた、ポップアップウィンドウの色を変更したい。
私はMyUI
スタイルの外v-filterselect-suggestpopup
とネストされたスタイルを追加(https://vaadin.com/docs/-/part/framework/components/components-combobox.html)コンボボックスのCSSスタイルの規則によると:その後
.v-filterselect-suggestpopup {
.gwt-MenuItem {
color: yellow;
}
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
.gwt-MenuItem {
color: green;
}
}
を、私は応答して変更を取得キャプション色でコンボボックスを持っています。しかし、ポップアップウィンドウの色は同じです(常に黄色です)。
ポップアップウィンドウが応答可能なUIの外側にレンダリングされるためだと思います。 Responsive.makeResponsive(displayBoxFilter)
は機能しませんでした。このウィンドウを反応させるにはどうすればいいですか?
提案が役に立ちます。 私はこのようなmytheme.scss
に外@mixin
@media
を追加しました::事前に おかげで
UPD(私のために働いた)Jouniの回答に基づいていること、これは応答拡張の制限です
@mixin mytheme {
@include theme;
...
}
@media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}