瓦丁。组合框响应式弹出 window

Vaadin. Combo box responsive popup window

我在整个页面上都有几个组合框。并且有一个组合框我想要响应。

假设我有包含它的布局,就像这样:

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

但是当我这样做时,只有 combo-box-caption 颜色发生变化。但我也想更改弹出窗口的颜色 window。

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

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

在那之后,我有一个带有 标题 颜色的组合框,可以响应地更改。但弹出 window 颜色保持不变(始终为黄色)。

我认为这是因为弹出窗口 window 在我的响应 UI 之外呈现。 Responsive.makeResponsive(displayBoxFilter) 无效。如何让这个 window 响应?

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

UPD 基于 Jouni 的回答(对我有用): 我在 mytheme.scss 中的 @mixin 之外添加了 @media,如下所示:

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

这是响应式扩展中的一个限制,它不适用于任何叠加元素(Window 组件除外)。

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