Theming the Tree component so that it has a border

Hello, community!

Currently, I’m trying to make Tree to have a border, but I face the problem that the width of rows is set explicitly and equals to the width of the Tree despite the paddings that I set via CSS. Below the test UI and styles that I use:

Vaadin version: 8.5.1

Test UI

// An initial planet tree
Tree<String> tree = new Tree<>();
tree.setWidth("300px");
tree.setHeight("400px");
TreeData<String> treeData = new TreeData<>();

// Couple of childless root items
treeData.addItem(null, "Mercury");
treeData.addItem(null, "Venus");

// Items with hierarchy
treeData.addItem(null, "Earth");
treeData.addItem("Earth", "The Moon");

TreeDataProvider<String> inMemoryDataProvider = new TreeDataProvider<>(treeData);
tree.setDataProvider(inMemoryDataProvider);
tree.expand("Earth"); // Expand programmatically

// setContent(tree);
VerticalLayout layout = new VerticalLayout(tree);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);

Styles

.v-tree8 {
  padding: round($v-unit-size/4);
  border: valo-border();
}

Actual Result

I know that as a workaround I can wrap Tree with Layout and style a layout, but that solution isn’t applicable for me as I want borders to be application wide.

Any advice is appreciated, thank you.

Regards,
Gleb

17343387.png

Hi Gleb,

I’d recommend using a wrapper. I think that’ll cause you less problems in the long run. It’s the safer option.

Theming components that calculate widths and heights can be tricky. I did a very simple test, and this seems to work, but caution is advised:

$tree-padding: round($v-unit-size/2);

.v-tree8 {
  border: valo-border();
  padding: round($v-unit-size/4);
}

.v-tree8-tablewrapper {
  max-height: calc(100% - $tree-padding);
  max-width: calc(100% - $tree-padding);
}

Hi, Joacim!

Thx for the replay.