FlowingCode / OrgChartAddon

Organizational Chart Vaadin Add-on
https://www.flowingcode.com/en/open-source/
Apache License 2.0
18 stars 4 forks source link

Problem with node template and direction different as default one #45

Closed paodb closed 10 months ago

paodb commented 3 years ago

As I was working on #41 I found another problem when using a direction that is not the default one and node templates. If we change direction to B2T (or L2R or R2L) in the first demo example, the styling of the nodes that have extra data to show as content, breaks. See images attached:

B2T: b2t-bug

L2R: l2r-bug

paodb commented 10 months ago

I did a re-test with the latest version (5.0.0) and the example in the demo https://addonsv24.flowingcode.com/orgchart/drag-and-drop is still displaying the nodes in a weird way when I change the direction to be L2R (or any other different than the default one): orgchart-left-to-right-template-version5-0-0

Looking at this again, I realized that this behavior is not a bug. I think is a case of taking in consideration that some styling work might be needed when using templates and a direction different than the default one (T2B).

If I take that example with the L2R direction and update the styling adding some css rules, then the chart displays correctly: orgchart-left-to-right-template-with-styling Added rules:

.orgchart.l2r .node {
    width: 70px !important;
}
.custom {
    position: relative;
    left: 20px;
    bottom: 20px;
}

If I take an example from the original component that uses a template and has the default direction like https://codepen.io/dabeng-the-styleful/pen/eYXOXJa and I change the direction to be L2R, it also breaks:

orgchart-original-l2r-direction-template