Grid column filter border is being cutoff

Flow
1

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

https://www.screencast.com/t/LtpG0ugmi

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

2

I found a ticket about this issue, but it is marked fixed https://github.com/vaadin/vaadin-grid/issues/1176

3

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

4

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">
    <template>
        <style>

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

        </style>
    </template>
</dom-module>

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

<custom-style>
    <style>
        vaadin-text-field {
            --vaadin-text-field-default-width: auto;
        }
    </style>
</custom-style>

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

5

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.

6

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