Grid column filter border is being cutoff

We are on Vaadin 13.0.1. The filter boxes in our Grid component are having the right border truncated. In this screencast

you can see that by deselecting

width: var(–vaadin-text-field-default-width, 12em);

associated with the vaadin-text-field-container it fixes the right border issue. Is this a bug? And what is the best way to address this issue? Thanks

I found a ticket about this issue, but it is marked fixed

Can we get this bug reopened? Can you also recommend a workaround here? Thanks.

I looked into this a bit more. We are adding styling to vaadin-text-field like so in order to add a border

<dom-module id="custom-text-field" theme-for="vaadin-text-field">

            :host [part="input-field"]
                border: solid 1px #babdbf;


The width on the vaadin-text-field-container is

width: var(--vaadin-text-field-default-width, 12em);

so when the grid is narrow enough it runs into the minimum width. I fixed the issue by adding this override

        vaadin-text-field {
            --vaadin-text-field-default-width: auto;

and in my case I am additionally constraining this style change to a grid class. I’ve attached my sample project. (106 KB)

Hi Nathan,
I tried the app (without the style module additions, just the Java code) and this seems to get fixed if you add filteringField.setWidthFull(); to the getFilterField method.

Great thanks! I will use your suggestion (which works for me) as it is certainly simpler.