Vaadin 24 styling question on text-field and select-field filters

Flow
1

I have a Grid filter row with text-field and select-field filters.
In Vaadin 14, I was able to style them like this:

:host(.GridFilter) [part="value"] {
  min-height: 24px;
  font-size: 12px;
}

For the select field, I used:

:host(.GridFilter) vaadin-select-text-field::part(input-field) {
  height: 24px;
}

On the java side, I added the class like:

// text filer field
filterField.addClassName("GridFilter");
// select filter field
filterSelect.addClassName("GridFilter");

so they look like:
image

By looking at the inspect window, we can see the style are being applied.
For select:
image
For text field:

image
image812×536 54.7 KB

However, in vaadin 24, the style does not apply for some reason and seems like the element got some changes.
When I do an inspect, for select field, it becomes vaadin-input-container?

image
image692×352 34.2 KB

I tried adding css like:

:host(.GridFilter) vaadin-input-container::part(input-field) {
	height: 24px;
}

For the text field, it becomes input instead of value, (looks strange to me)
image

so I tried adding:

:host(.GridFilter) [part="input"] {
min-height: 24px;
font-size: 12px;
}

Both the select field and text field don’t work, I am not sure what is the issue here?

2

Are you still using the `themes/[my-theme]/components? folder to inject the styles into the shadow DOM of the components?

The :host selector only works inside the shadow DOM. Conversely, the ::part() selector only works outside shadow DOM, i.e., light DOM, with stylesheets that are not inside the components folder.

Nothing has changed regarding the parts of those components, so I’m not sure why your styles no longer work. Did you change something related to them?

I assume you updated the Vaadin version. Which version are you using now?

1 Like
3

The original is V14, so a lot has changed in the DOM structure since then.

The way to achieve the same thing in V24, in light-DOM css (i.e. styles.css or whatever) should be something like:

vaadin-text-field {
  --vaadin-input-field-value-font-size: 12px;
  --lumo-text-field-size: 24px;
}

vaadin-select {
  --vaadin-input-field-value-font-size: 12px;
}
/* The usual field sizing properties don't work with Select because it's internally a kind of button */
vaadin-select > vaadin-select-item {
  min-height: 24px;
}
1 Like
4

Ah, I should learn to read properly. Missed the part about Vaadin 14.

5

so I followed the migration guide Recommended Changes | Upgrading | Vaadin Docs
and created a vaadin-grid.css under the component folder,
I believe I should put these style in vaadin-grid.css since these style are only going to be apply on Grid Filters
Also, I believe I probably need to specify the class :host(.GridFilter) since I added the class for the fields
filterField.addClassName("GridFilter"); filterSelect.addClassName("GridFilter");?

so it should look like :

:host(.GridFilter) vaadin-text-field {
  --vaadin-input-field-value-font-size: 12px;
  --lumo-text-field-size: 24px;
}

:host(.GridFilter) vaadin-select {
  --vaadin-input-field-value-font-size: 12px;
}

:host(.GridFilter) vaadin-select > vaadin-select-item {
  min-height: 24px;
}

so putting the code you provide to styles.css work(without adding :host(.GridFilter) ), but I expect them to work in vaadin-grid.css under the component folder, but it does not.
Why is that?

6

Actually things have changed since V23, and it’s now recommended to not use the components folder, and instead style components using normal (non-shadow-DOM) css. Here’s the V24 styling docs: How to style components in Vaadin

The gist of it is to just have everything in styles.css, not use the components folder (unless you already have a bunch of shadow DOM stylesheets, in which you can of course keep using them, but at least write any new css elsewhere).

The benefit of the V24 way is that shadow DOM styling of components is, in most cases, more complicated, and we don’t have any documentation for how to target their various parts etc.

I can explain why your code doesn’t work, and help you get it working, but I strongly recommend going the V24 way. In this case that means putting the CSS I proposed in your styles.css or some other stylesheet imported through it.

Since you are applying a classname to them anyway, there is no need for further scoping of the styles, so just add that classname to the selectors:

vaadin-text-field.GridFilter {
  --vaadin-input-field-value-font-size: 12px;
  --lumo-text-field-size: 24px;
}

vaadin-select.GridFilter {
  --vaadin-input-field-value-font-size: 12px;
}
/* The usual field sizing properties don't work with Select because it's internally a kind of button */
vaadin-select.GridFilter > vaadin-select-item {
  min-height: 24px;
}

Note that I haven’t tested this css, so I’m not 100% sure the Select styling works correctly like that (as mentioned, Select is different from other fields and styling it is a bit trickier), but at least the TextField should work.

1 Like
7

Thank you for the explanation, it makes more sense now.
I was still having some trouble styling the select component (the TextField is working fine). I experimented a bit, and eventually this fixed the select height.

vaadin-select {
  --vaadin-input-field-value-font-size: 10px;
}
vaadin-select > vaadin-select-value-button {
  min-height: 24px;
}
vaadin-select > vaadin-select-value-button > vaadin-select-item {
  min-height: 22px;
}