TreeGrid and shadow dom table styling?

alexweirig · October 8, 2026, 11:40am

Dear team,

I have a MasterDetail layout (25.3.1) and a TreeGrid with a custom column renderer. I the column (horizontal layout, setWidthFull) I have a badge, a label an icon and a button (tertiary). That button activates the Detail part if you click it (showing the details for the row).

Unfortunately the titles displayed on the button can be extremely long. So I styled the button using:

	font-size: var(--aura-font-size-l);
	font-weight: var(--aura-font-weight-medium);
	width: 100%;
    justify-content: start;
    display: contents;

But with the use of “display: contents” I get a horizontal scrollbar that is not needed in the grid.

I could remove this scrollbar by adding an “overflow-x: hidden” to the table in the shadow dom (it works in the dev tools in the browser), but unfortunately the table has no part attribute, just an id and a role, which means I can’t select the table in my css to change the overflow-x.

Prior to 25 there was the option to add css files in a components folder, but I think to remember that his has been deprecated.

Is there a way today to easily add the overflow-x css to the table in the shadow dom?
Or is there a different way to style the tertiary button in order to make use the available with an wrap the text (or ellipse the overflow text).

Many thanks in advance for your support

Alex

Jouni1 · October 8, 2026, 12:09pm

You shouldn’t use display: contents on a button. That makes it invisible for screen readers, and probably also to keyboard navigation.

Can you share a screenshot of the column that you have, and what the problem is with the overflow/scrollbar?

alexweirig · October 8, 2026, 12:28pm

Hi Jouni,

thanks for your quick reply. I attach a screen shot

Alex

Jouni1 · October 8, 2026, 12:43pm

Thanks. Hard to give a comprehensive answer without knowing the full layout configuration and additional CSS you might have there.

It looks like you’re using the Aura theme. Button labels should wrap by default, so you would only need to make sure the button width doesn’t grow bigger than the container allows. You could try the following for the buttons:

vaadin-button {
  min-width: 5em; /* Allow the button to shrink below its natural width, but not completely to zero */
  max-width: 100%; /* Make sure the button never exceeds the container width */
}

alexweirig · October 8, 2026, 12:57pm

Sure, it’s not easy to understand what his happening without seeing the application.

Indeed button labels in Aura do somewhat wrap but not 100% as you would expect. It seems it doesn’t wrap a word unless the word overflows completely.

It also seems I need to specify
align-text: left
and
justify-content: start
to make the label be left aligned.

I’ll do some more CSS tests.

alexweirig · October 9, 2026, 6:49am

Hello,

I finally managed to get everything working the way I expected.

I added

Button title = ...
title.addClassName("some-class");
layout.expand(title);
title.setWitdhFull();

in the Java code
2) in the CSS I had to do:

vaadin-button.some-class {
...
flex-grow: 1;
min-width: 0;
white-space: normal;
height: auto;	
justify-content: start;
text-align: left;
}

and finally:

vaadin-button.some-class.part("label") {
white-space: normal;
overflow-wrap: break-word;
}