Vaadin。组合框响应弹出窗口

时间:2017-05-11 08:59:44

标签: css vaadin responsive vaadin7

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

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

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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