CODEWITHSUNDEEP
vaadinvaadin-flow
res1
res1

Reputation: 3660

Vaadin: different behaviour with css while styling grid cell and combo box item

I am using V14, I have a simple test css file like:

.foobar {
  color: red;
}

on my test view class I import it with:

@CssImport(value="./styles/test.css")

and a Grid where I create a column like:

        grid.addColumn(TemplateRenderer.<User>of(
                "<div class=\"foobar\">[[item.test]]</div>").
                withProperty("test", u -> u.getName())).
                setHeader("TEST");

and this works, the text in the column is red.

I have a ComboBox and I use to style item:

        comboBox.setRenderer(TemplateRenderer.<User>of(
                        "<div class=\"foobar\">[[item.test]]</div>").
                withProperty("test", u -> u.getName()));

and this doesn't work, the text is correct but it's not red.

If I use:

@CssImport(value="./styles/test.css", themeFor = "vaadin-combo-box-item")

It works for the combo box too.

Why this different behaviour?

Why in the grid I don't have to indicate the styled scope like themeFor=vaadin-grid-cell-content ? shadow root it's involved in the grid too.

Or am I styling the grid in wrong way?

Thanks for the help.

Upvotes: 1

Views: 200

Answers (1)

Rolf
Rolf

Reputation: 2418

This is because in V14 the items in the ComboBox dropdown are inside the Shadow DOM, but the contents of Grid cells are not.

In V23 and V24 this has been changed so that ComboBox items are no longer in Shadow DOM.

Upvotes: 4

Related Questions