Hi, i’m using vaadin 7.1 snapshot (7.1.0.nightly-5552dce2c4a4dd107c6794c8ffa717bfaf14152c). I try to use the dynamic CSS style injection. But ie10 seems like override all my style when applying the new style. The previous added style has gone. But it work fine in Firefox and chrome. My code: [code]
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
TextField IPTf = new TextField("NAME");
TextField PortTf = new TextField("AGE");
Button delBttn = new Button("DELETE");
delBttn.setImmediate(true);
delBttn.setStyleName("link");
Button saveBttn = new Button("SAVE");
saveBttn.setImmediate(true);
saveBttn.setStyleName("link");
FormLayout form = new FormLayout();
form.setMargin(new MarginInfo(true, false, true, false));
form.addComponent(IPTf);
form.addComponent(PortTf);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setStyleName("layout");
hLayout.setCaption("POLICY");
hLayout.addComponent(form);
hLayout.addComponent(delBttn);
hLayout.addComponent(saveBttn);
final OptionGroup option = new OptionGroup("Change color");
option.setImmediate(true);
option.addItem("default");
option.addItem("color 1");
option.addItem("color 2");
option.select("default");
option.addValueChangeListener(new ValueChangeListener() {
@Override
public void valueChange(ValueChangeEvent event) {
if (option.getValue().equals("color 1")) {
Page.getCurrent().getStyles().add(".v-app .layout { background-color: #EFFAD3} ");
} else if (option.getValue().equals("color 2")) {
Page.getCurrent().getStyles().add(".v-app .layout { background-color: #CED9FD} ");
} else {
Page.getCurrent().getStyles().add(".v-app .layout { background-color: #eeeeee} ");
}
}
});
layout.addComponent(hLayout);
layout.addComponent(option);
[/code]
my css : [code]
@mixin testing {
@include chameleon;
.layout {
background-color: #eeeeee;
border-top: solid 1px #B3B3B3;;
.v-caption {
padding-left: 25px;
}
}
.v-caption-layout {
position: relative !important;
.v-captiontext {
font-weight: bold;
}
}
.v-button {
&.link, link.v-disabled {
color: red;
margin-top: 15px !important;
padding-left: 5px !important;
overflow: visible !important;
&:active, &:hover, &:focus {
.v-button-wrap {
box-shadow: none;
overflow: visible !important;
}
}
}
}
[/code]
