J'ai plusieurs zones de liste déroulante sur la page. Et il y a une combo que je veux être réactif.Vaadin. Fenêtre contextuelle responsive combo
Supposons que je mise en page contenant, comme ceci:
public class MyLayout extends CssLayout ... {
...
void initLayout {
displayBoxFilter = new ComboBox();
displayBoxFilter.addStyleName("displayBoxFilter");
}
}
et je CSS comme ceci:
.MyUI {
...
.displayBoxFilter {
color: red;
}
}
.MyUI[width-range~="0-767px"] {
...
.displayBoxFilter {
color: blue;
}
}
Mais quand je fais cela, seules les couleurs combo-box-légende se changer. Mais je veux aussi changer la couleur de la fenêtre contextuelle.
Selon zone de liste déroulante des règles de style CSS (https://vaadin.com/docs/-/part/framework/components/components-combobox.html) i ajouter v-filterselect-suggestpopup et styles imbriqués à l'extérieur MyUI de style:
.v-filterselect-suggestpopup {
.gwt-MenuItem {
color: yellow;
}
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
.gwt-MenuItem {
color: green;
}
}
Après cela, j'ai une zone de liste déroulante avec légende couleurs qui sont changés en réponse. Mais la couleur de la fenêtre contextuelle reste la même (toujours jaune).
Je pense que c'est parce que la fenêtre popup est rendue en dehors de mon interface utilisateur sensible. Responsive.makeResponsive(displayBoxFilter) ne fonctionnait pas. Comment rendre cette fenêtre réactive?
Toute suggestion vous serait utile! Merci à l'avance
UPD basées sur la réponse de Jouni (travaillé pour moi): J'ai ajouté @media en dehors @mixin dans mytheme.scss comme ceci:
@mixin mytheme {
@include theme;
...
}
@media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}