我在整个页面上都有几个组合框。并且有一个组合框我想要响应。
假设我有包含它的布局,就像这样:
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 ) 我在 MyUI
样式之外添加 v-filterselect-suggestpopup
和嵌套样式:
.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
中的 @mixin
之外添加了 @media
,如下所示:
@mixin mytheme {
@include theme;
...
}
@media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}
最佳答案
这是响应式扩展中的一个限制,它不适用于任何叠加元素(Window 组件除外)。
最好的解决方法是使用常规的 CSS 媒体查询。
关于css - 瓦丁。组合框响应弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43910936/