TreeGrid hierarchy column wraps children horizontally

[mvysny]

Description

Hierarchy column lays out its children in a different way than a non-hierarchy column: hierarchy column wraps its children while non-hierarchy column fills its parent. This produces an inconsistency of behavior for components that rely on width-filling the column, for example a Div which ellipsizes its text.

Expected outcome

Hierarchy column should make its child fill-parent, exactly as a regular column does.

Actual outcome

Hierarchy column leaves the child to grow, overflowing the column contents.

Live Demo (optional)

Minimal reproducible example

package org.vaadin.example;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.treegrid.TreeGrid;
import com.vaadin.flow.router.Route;

import java.util.ArrayList;
import java.util.Arrays;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        final TreeGrid<String> grid = new TreeGrid<>();
        grid.setItems(Arrays.asList("1", "2", "3"), it -> new ArrayList<>());
        grid.addComponentHierarchyColumn(it -> {
            final Div div = new Div();
            div.setText("this one isn't fill parent and will overflow happily " + it);
            div.getStyle().set("text-overflow", "ellipsis");
            div.getStyle().set("overflow", "hidden");
            return div;
        }).setHeader("hierarchical").setResizable(true);
        grid.addComponentColumn(it -> {
            final Div div = new Div();
            div.setText("this one fills the column correctly and will thus ellipsize properly " + it);
            div.getStyle().set("text-overflow", "ellipsis");
            div.getStyle().set("overflow", "hidden");
            return div;
        }).setHeader("hierarchical").setResizable(true);
        add(grid);
    }
}

Steps to reproduce

Paste the class above to the skeleton-starter-flow project.

Environment

• Vaadin 21.0.9

[mvysny]

A workaround is to use the following CSS (a global CSS, no need to inject it into the TreeGrid or Grid):

vaadin-grid-tree-toggle {
  width: 100%;
}
vaadin-grid-tree-toggle > flow-component-renderer {
  width: calc(100% - 1.5em);
}

[rolfsmeds]

Changed the title to better reflect what's going on here:
The toggle element doesn't stay within the bounds of the cell, but instead overflows it. The content is still visually truncated because it ends up behind behind the following cell.

[web-padawan]

Looks like fixing this in the web component would require us to align vaadin-grid-tree-toggle with vaadin-grid-sorter:

1. Add part to wrap <slot> element:

<div part="content">
  <slot></slot>
</div>

2. Add corresponding CSS to content part:

[part='content'] {
  overflow: hidden;
  text-overflow: ellipsis;
}

3. Set max-width: 100% on the vaadin-grid-tree-toggle:

:host {
  max-width: 100%;
}

The main reason behind adding new stylable part is the fact that we need an extra HTML element to apply styles.
We can't use ::slotted(*) as it won't select a text node placed into a slot; it only targets actual elements.

UPD: the last point can be done separately as a bugfix. Then it would be easier to make this work with Flow.

[rolfsmeds]

If we're going to mess with the DOM, would it make sense to do #1091 at the same time?

[jouni]

Instead of adding a new element, we can also style the slot element. Not sure if that helps?

[rolfsmeds]

Not really, since the slot is display:contents we specifically can not style the slot per se, right? We can apply styles that are inherited by the slots contents, but that won't help either since the content is a text node.

[web-padawan]

Instead of adding a new element, we can also style the slot element

We actually can set display: block on the slot element. I tried it, seems to work in all browsers 🙈

UPD: here is a PR vaadin/web-components#3525

[jouni]

We actually can set display: block on the slot element.

Yeah, this is what I meant. I think it’s a completely valid approach, if you can't think of reasons why it wouldn't work. I mean, that could also be considered as “messing with the DOM”?