TreeGrid on v23 autowidth broken

[KaijuDeluxe]

Description of the bug

After upgradeing to vaadin 24 from 14 and createing a Treegrid like

treeGrid.addHierarchyColumn(ProductCategory::getCategoryName).setHeader("Kategorie").setSortable(false).setAutowidth(true);

the column is not resized automatically, even when i call treeGrid.recalculateColumnWidths() when new Objects are added or the grid is set with items. I must to setWidth("400px") to show the content

EDIT: when i call in the dataprovide treeGrid.recalculateColumnWidths(); it works. But directly after creating the treegrid nothing happens, the columns are not resized. Only when i expand a node, the column get resized

Expected behavior

The Column should be set autowidth like in vaadin 14

Minimal reproducible example

TreeGrid<ProductCategory> treeGrid = new TreeGrid<>();
treeGrid.addHierarchyColumn(ProductCategory::getCategoryName).setHeader("Kategorie").setSortable(false).setAutoWidth(true);

treeGrid.recalculateColumnWidths();

Versions

• Vaadin / Flow version: 23
• Java version: 11
• OS version: Mac OS 12
• Browser version (if applicable): Safari and Chrome latests versions
• Application Server (if applicable):
• IDE (if applicable): IntelliJ

[web-padawan]

Need to check if this could be a regression from vaadin/web-components#3525

[tomivirkki]

Need to check if this could be a regression from vaadin/web-components#3525

Seems like it. Turns out having max-width: 100% on the toggle element prevents grid from obtaining its intrinsic width while calculating auto-width for the column. We could probably fix this by using display: flex instead of max-width: 100% for the toggle.

A workaround for this issue is to apply the following styles to vaadin-grid-tree-toggle:

display: flex;
max-width: initial;

[jouni]

Have we considered display: contents for the :host? Probably has its share of complications, but wondering if it could be viable here.

[tomivirkki]

Have we considered display: contents for the :host? Probably has its share of complications, but wondering if it could be viable here.

In tree-toggle's case, host defines the flexbox layout. If display: contents is used on the host, the layout is broken:

having max-width: 100% on the toggle element prevents grid from obtaining its intrinsic width while calculating auto-width for the column

After more investigation, turns out that using max-width: 100% doesn't actually affect calculating the column's intrinsic width. There is, however, some CSS that applies a negative margin to the tree toggle element, probably added in an attempt to align the arrow icon with the column header title.

Without the negative margin:

With the negative margin:

Using a negative margin does reduce the intrinsic width of the component and thus reduces the resulting width of an auto-width tree-column. Before applying max-width: 100%, the problem was still there, but it wasn't that obvious to see.

I suggest fixing the issue by using transform: translateX in place of the negative margin for shifting the component horizontally. Using a transform doesn't affect the component's width and thus fixes the automatically calculated tree column width.

[KaijuDeluxe]

awesome! In which version it will be rolled out?

[tomivirkki]

The fix should be included in the next patch releases of 23.1 and 23.2, also 23.3.0-(next alpha)