-
Notifications
You must be signed in to change notification settings - Fork 4
Description
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
Type
Projects
Status