How to set transparent color to the editor component (Vaadin)

Viewed 29

I am trying to set transparent background to the textField in non-buffered grid:

So I tried this:

I have created own css class vaadin-grid-field.css

[part='input-field'] {
    background-color: transparent;
}

And then I have added the @CssImport in the class, where I using the non-buffered grid

@CssImport(value = "../frontend/themes/myapp/components/vaadin-grid-field.css", themeFor = "vaadin-text-field")

The result was good, but it set the transparent background to the all textFields in my app, e.g. in loginView too and it looks like:

enter image description here

grid looks like:

enter image description here

not only in fields from class where I imported the @CssImport

So I added the own class name into the vaadin-grid-field.css

.custom-grid-field [part='input-field'] {
    background-color: transparent;
}

Then I tried to set the class only to the textField which is inserted into the grid

TextField textField = new TextField();
textField.addClassName("custom-grid-field");
binder.forField(textField).bind(....);
grid.addColumn(...).setEditorComponent(textField);

but it showing all textFields again, included the textFields from non-buffered grid

enter image description here

What am I doing wrong?

0 Answers
Related