Ich habe mehrere Kombinationsfelder auf der ganzen Seite. Und es gibt eine Combobox, die ich ansprechen möchte.Vaadin. Kombinationsfeld responsive Popup-Fenster
Nehmen wir an, ich habe das Layout, genau wie diese enthält:
public class MyLayout extends CssLayout ... {
...
void initLayout {
displayBoxFilter = new ComboBox();
displayBoxFilter.addStyleName("displayBoxFilter");
}
}
und ich habe CSS wie folgt aus:
.MyUI {
...
.displayBoxFilter {
color: red;
}
}
.MyUI[width-range~="0-767px"] {
...
.displayBoxFilter {
color: blue;
}
}
Aber wenn ich das tue, nur Combo-Box-Beschriftung Farben sich umziehen. Aber ich möchte auch die Farbe des Popup-Fensters ändern.
Nach Kombinationsfeld CSS-Stilregeln (https://vaadin.com/docs/-/part/framework/components/components-combobox.html) i hinzufügen v-filterselect-suggestpopup und verschachtelten Formate außerhalb MyUI Stil:
.v-filterselect-suggestpopup {
.gwt-MenuItem {
color: yellow;
}
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
.gwt-MenuItem {
color: green;
}
}
Danach, ich habe ein Kombinationsfeld mit Bildunterschrift Farben, die in Reaktion darauf erhalten geändert. Die Popup-Fensterfarbe bleibt jedoch gleich (immer gelb).
Ich denke, es ist, weil Popup-Fenster außerhalb meiner Responsive UI gerendert wird. Responsive.makeResponsive(displayBoxFilter) hat nicht funktioniert. Wie mache ich dieses Fenster ansprechbar?
Alle Vorschläge wären hilfreich! Vielen Dank im Voraus
UPD basierend auf Jouni Antwort (für mich gearbeitet): habe ich @media außerhalb @mixin in mytheme.scss wie folgt hinzugefügt:
@mixin mytheme {
@include theme;
...
}
@media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}