Hi, Nice addon, thanks for making this available! I have one problem with

Directory OrgChart Add-on
1

Hi,

Nice addon, thanks for making this available!
I have one problem with it however, and wonder if you can help.

I am using version 4.0.5 and am trying to create a chart that looks like this one:

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.

Thanks in advance for any ideas on how to fix this.

Hordur Thordarson

18465253.png
18465253.png576×718 7.12 KB

2

Update…

The problem seems to be that I am using BOTTOM_TO_TOP chart direction. If I use the default direction (TOP_TO_BOTTOM) then the chart looks good.
So it seems there is a bug in the JS library when using BOTTOM_TO_TOP.

Hordur

3

Update 2… fixed with some CSS if anyone should have the same problem.

.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;
}
4

Hi Hordur!

Sorry for the delay in answering and thanks for the feedback.

We’ve created [an issue]
(https://github.com/FlowingCode/OrgChartAddon/issues/41) to reproduce this problem and maybe solve it with the code that you provided.

Thanks again for contributing!

5

Thanks for creating the issue!

I’m not sure the css mess I suggested is the best way of solving this problem but at least it is a temp workaround until someone comes up with a proper solution.

6

Hello, the latest release includes a fix for this issue. Let us know if you get the chance to try it out.

Regards.