Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with BOTTOM_TO_TOP chart direction #41

Closed
mlopezFC opened this issue Feb 17, 2021 · 1 comment
Closed

Problem with BOTTOM_TO_TOP chart direction #41

mlopezFC opened this issue Feb 17, 2021 · 1 comment
Assignees

Comments

@mlopezFC
Copy link
Member

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

@paodb paodb self-assigned this May 3, 2021
paodb added a commit that referenced this issue May 5, 2021
@paodb
Copy link
Member

paodb commented May 5, 2021

I was able to reproduce the issue. Is happening when using node template with no content div and direction bottom to top (b2t).
I'm about to create a PR with a fix, but a different one as the one proposed, as we need to have in consideration the use of node template, if a div for content is defined and if the direction is b2t.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

No branches or pull requests

2 participants