How to get a rich component for the hierarchy column have width of the column?

Slava_Imeshev · January 25, 2025, 10:22pm

How to get a rich component added to TreeGrid using addComponentHierarchyColumn() have width of the column? No matter what I try, it seems to be bound by vaadin-grid-tree-toggle while vaadin-grid-cell-content has the correct full width. On other words, how to expand vaadin-grid-tree-toggle to use all width of vaadin-grid-cell-content?

Stefan.27 · January 27, 2025, 3:44am

Seems like the custom style of the internally used slot element is making problems. Normally, a slot just has a display: contents, which allows its “children” to regulate their dimensions, but here it is set to display: block. That means, that it has its own dimensions, which are using only minimal space.

I would recommend using css to solve this issue. For this your app needs to have a custom theme, where you have to set the toggle and its internal slot to full width. While the toggle width can be set somewhere in the light styles, e.g. the styles.css

vaadin-grid-tree-toggle {
    width: 100%;
}

the slot part needs to be done using shadow dom styling, since it has no part attribute assigned.

frontend/themes/your-theme/components/vaadin-grid-tree-toggle.css

slot {
    width: 100%;
}

Stefan.27 · January 27, 2025, 3:51am

github.com/vaadin/web-components

[vaadin-grid-tree-toggle] Add a part name to the slot element.

opened 03:51AM - 27 Jan 25 UTC

stefanuebe

### Describe your motivation The tree toggle overrides the default stylings for… `<slot>`, changing its `display` to `block` instead of `contents`. This leads to the issue, that elements placed into that slot cannot use relative dimensions based on the light dom, but have to have knowledge of the shadow dom. ### Describe the solution you'd like To overcome this issue with our current way of styling shadow dom parts, the easiest way to overcome this issue is to add a part attribute to the slot element, e.g. ``` <slot part="content"></slot> ``` allowing devs to target it in the light dom stylings ``` vaadin-grid-tree-toggle::part(content) { width: 100%; } ``` Might be also a good idea to have the width of the slot set to `100%` by default, but not sure if this may break other things. ### Describe alternatives you've considered Adding my own styles styles.css ``` vaadin-grid-tree-toggle, vaadin-grid-tree-toggle * { width: 100%; } ``` shadow dom styling for the toggle element, e.g. frontend/themes/your-theme/components/vaadin-grid-tree-toggle.css ``` slot { width: 100%; } ``` ### Additional context Based on https://vaadin.com/forum/t/how-to-get-a-rich-component-for-the-hierarchy-column-have-width-of-the-column/168199

Slava_Imeshev · February 6, 2025, 3:36am

Hi @Stefan.27, thank you for the suggestion. Please let me try it. I’ll report back on the result.

Slava_Imeshev · February 6, 2025, 1:52pm

Using both styles.css:

vaadin-grid-tree-toggle {
    width: 100%;
}

and

frontend/themes/your-theme/components/vaadin-grid-tree-toggle.css

slot {
    width: 100%;
}

worked. Thank you! I updated the Github ticket.