瓦丁。组合框响应弹出窗口答案

【问题标题】：Vaadin. Combo box responsive popup window瓦丁。组合框响应弹出窗口
【发布时间】：2017-05-11 08:59:43
【问题描述】：

我在整个页面上有几个组合框。还有一个我想要响应的组合框。

假设我有包含它的布局，就像这样：

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

但是当我这样做时，只有组合框标题颜色会改变。但我也想改变弹出窗口的颜色。

根据组合框 CSS 样式规则 (https://vaadin.com/docs/-/part/framework/components/components-combobox.html) 我添加了v-filterselect-suggestpopup 和MyUI 样式之外的嵌套样式：

.v-filterselect-suggestpopup {
  .gwt-MenuItem {
    color: yellow;
  }
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
  .gwt-MenuItem {
    color: green;
  }
}

在那之后，我有一个带有 caption 颜色的组合框，可以响应地改变。但弹出窗口颜色保持不变（始终为黄色）。

我认为这是因为弹出窗口呈现在我的响应式 UI 之外。 Responsive.makeResponsive(displayBoxFilter) 没用。如何使此窗口具有响应性？

任何建议都会有所帮助！提前致谢

UPD 基于 Jouni 的回答（为我工作）：我在mytheme.scss 中添加了@media 之外的@mixin，如下所示：

@mixin mytheme {
  @include theme;
  ...
}
@media (max-width:767px) {
  .mytheme {
    .gwt-MenuItem {
      color: green;
    }
  }
}

【问题讨论】：

标签： css vaadin responsive vaadin7

【解决方案1】：

这是响应式扩展中的一个限制，它不适用于任何覆盖元素（Window 组件除外）。

最好的解决方法是使用常规 CSS 媒体查询。

【讨论】：