Skip to content

Problem with BOTTOM_TO_TOP chart direction #41

@mlopezFC

Description

@mlopezFC

Taken from Vaadin Directory feedback:

I am using version 4.0.5 and am trying to create a chart that looks like this one: https://codepen.io/dabeng/pen/mRZpLK That is, only the top part of the nodes is shown, not the bottom part.
My test code is very simple:

OrgChartItem vh00034 = new OrgChartItem(1, "VH00034", "");
OrgChartItem vh00035 = new OrgChartItem(1, "VH00035", "");
OrgChartItem vh00036 = new OrgChartItem(1, "VH00036", "");
OrgChartItem vh00037 = new OrgChartItem(1, "VH00037", "");
OrgChartItem vh00038 = new OrgChartItem(1, "VH00038", "");
OrgChartItem vh00040 = new OrgChartItem(1, "VH00040", "");
vh00040.setClassName("tracedlot");
OrgChartItem vh00041 = new OrgChartItem(1, "VH00041", "");
OrgChartItem vh00042 = new OrgChartItem(1, "VH00042", "");
vh00034.setChildren(Arrays.asList(vh00035));
vh00035.setChildren(Arrays.asList(vh00036, vh00040));
vh00036.setChildren(Arrays.asList(vh00037));
vh00037.setChildren(Arrays.asList(vh00038));
vh00040.setChildren(Arrays.asList(vh00041));
vh00041.setChildren(Arrays.asList(vh00042));
OrgChart orgChart = new OrgChart(vh00034);
orgChart.setChartTitle("Loturakning: VH00041");
orgChart.setChartDirection(ChartDirectionEnum.BOTTOM_TO_TOP.getAbreviation());
String nodeTemplate2 = "<div class='title'>${item.name}</div>";
orgChart.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate2));
orgChart.initializeChart();
add(orgChart);

But while the nodes are drawn correctly, there is a lot of white space below them, so the line connecting a node to the node below it is far from the upper node. See the attached screenshot where the top-left node is selected. This seems to be caused by the focus area (when a node is selected) being in a different place (further down) than the actual node. I have no CSS on the page that affects this, the page is just a blank Vadadin Div component with the org chart inside.

Then a solution was proposed:

.node{
	border: 1px solid #DE6F70 !Important;
   	
  	padding: 0px !Important;
  	border-top-right-radius: 5px;
  	border-top-left-radius: 5px;
	position: unset !important; 
		  
	border-radius:4px;
}
.node .title{
	overflow: unset !important;
	line-height:unset !important;
	height:unset !important;
	padding-top:4px;
	position: relative;
  	top: -23px;  
}
.orgchart table {
  	margin-right: 4px;
}

It would be great to reproduce and solve the problem with what was proposed

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions