Grid horizontal overflow

I would like to keep every grid column to a bare minimum and give all the leftover space to the recipient column. I am using setAutoWidth(true) on each column and setFlexGrow(1) on the recipient column. When recipient text is too long however, it starts overflowing the grid horizontally instead of doing the “sometext…” thing or even with GridVariant.LUMO_WRAP_CELL_CONTENT its still showing the horizontal scroll bar and overflowing the grids width. what am i doing wrong?

setFlexGrow(0) on the other columns could help

doesnt seem to change anything :/

The wrap variant won’t help here because there’s no whitespace in an email address to break the line at.

flexGrow(1) just tells the column to expand to use any remaining horizontal space, but in this case there’s no remaining space per se – that would require the Grid itself to be wider than the total width of all columns.

Auto-width is unfortunately not entirely reliable due to lazy loading etc.

I would expect it to truncate the cell’s contents with ellipsis (…) however. Not sure why it doesn’t do that.

I’d suggest removing the flexGrow(1) from the recepient col and see if that helps.

Is your email column some kind of special component? At least in 24.1 this works well:

        Grid<String> grid = new Grid<>();
        grid.setItems("foo", "bar", "baz");
        grid.addColumn(s -> s).setHeader("String");
        grid.addColumn(s -> "This is a really long text line that should clip")
                .setHeader("Long text")
        grid.addColumn(s -> "")
                .setHeader("Long email")

Alright, using AutoWidth true, FlexGrow 0 on the fixed size columns and AutoWidth false, FlexGrow n > 0 on not fixed width columns seems to be working. Thanks a lot

@useful-whale Should we add some example to docs for this kind of use case?

Sounds quite common setup to me.

yeah, there are a lot of not entirely intuitive configs, would be good. (Someone could create a ticket in :grin: )