I am following this migration guide to change how to apply the css: Recommended Changes | Upgrading | Vaadin Docs
Previously, I have them on the MainView:
@Theme(themeFolder = "myapp")
@CssImport(value = "./themes/myapp/grid-style.css", themeFor = "vaadin-grid")
@CssImport(value = "./themes/myapp/vaadin-select-style.css", themeFor = "vaadin-text-field vaadin-text-area vaadin-integer-field vaadin-select multiselect-combo-box multiselect-combo-box-input vaadin-list-box")
@CssImport(value = "./themes/myapp/combo-box-item-style.css", themeFor = "vaadin-combo-box-item vaadin-combo-box-overlay")
@CssImport(value = "./themes/myapp/notification-card.css", themeFor = "vaadin-notification-card")
@CssImport(value = "./themes/myapp/upload-style.css", themeFor = "vaadin-upload vaadin-upload-file")
@CssImport(value = "./themes/myapp/vaadin-text-area.css", themeFor = "vaadin-text-area")
@PageTitle("Main")
public class MainView extends AppLayout {
I removed all these annotations, and created a AppShellConfig:
@Theme(value = "myapp")
@PWA(name = ".......", shortName = ".......", description = "....... ")
public class AppShellConfig implements AppShellConfigurator {
private static final long serialVersionUID = -.......L;
}
and /themes/myapp/styles.css, I have:
@import url('./main-layout.css');
and /themes/myapp/main-layout.css, I have:
@import url('./grid-style.css');
@import url('./vaadin-select-style.css');
@import url('./combo-box-item-style.css');
@import url('./notification-card.css');
@import url('./upload-style.css');
@import url('./vaadin-text-area.css');
Am I applying the css this correctly?
What am I noticing is:
when I inspect a field on the old page,
I can see the
:host(.GridFilter) vaadin-select-text-field::part(input-field)
it is applying the style for GridFilter that I define
But when I inspect the same field on the new page (vaadin24),
:host(.GridFilter) vaadin-select-text-field::part(input-field) does not get applied as I don’t see it on the inspection panel:
this line come from vaadin-select-style.css
vaadin-select-style.css:
:host(.GridFilter) [part="value"] {
min-height: 24px;
font-size: 12px;
}
:host(.GridFilter) {
padding-top: 10px;
padding-bottom: 0;
}
:host(.GridFilter) vaadin-select-text-field {
padding: 0;
}
:host(.GridFilter) vaadin-select-text-field [part="value"] vaadin-item {
padding: 0px;
min-height: 22px;
font-size: 12px;
}
:host(.GridFilter) vaadin-select-text-field::part(input-field) {
height: 24px;
}
What am I doing wrong here?