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