Help With Alignment

[Kannndev]

Hi @alyssaxuu . I am trying to integrate the demo inside a modal. Sometimes I run into an alignment issue. Not sure exactly what is causing it because it seems to occur intermittently. When it happens it looks like this. Any idea what would be causing this ?

Thanks for the help.

[alyssaxuu]

That is odd. Can you share the code? Might be able to look into it.

[Kannndev]

Thanks for you quick reply. Please give me some time I will share it with you.

[Kannndev]

@alyssaxuu Please find the source code on this repo link

[Kannndev]

Please find the output when the issue came. Hope this would help.

{ "html": "<div class=\"blockelem noselect block\" style=\"left: 527px; top: 121px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenACandidateMovedToThisStage\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"0\">\n <div class=\"blockyleft\">\n <img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\" draggable=\"false\">\n <p class=\"blockyname\">New visitor</p>\n </div>\n <div class=\"blockyright\"><img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\"></div>\n <div class=\"blockydiv\"></div>\n <div class=\"blockyinfo\">When a <span>new visitor</span> goes to <span>Site 1</span></div>\n </div><div class=\"blockelem noselect block\" style=\"left: 130.625px; top: 295px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenACandidateMovedToThisStage\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"1\">\n <div class=\"blockyleft\">\n <img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\" draggable=\"false\">\n <p class=\"blockyname\">New visitor</p>\n </div>\n <div class=\"blockyright\"><img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\"></div>\n <div class=\"blockydiv\"></div>\n <div class=\"blockyinfo\">When a <span>new visitor</span> goes to <span>Site 1</span></div>\n </div><div class=\"arrowblock\" style=\"left: 284.625px; top: 230px;\"><input type=\"hidden\" class=\"arrowid\" value=\"1\"><svg preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M512 0L512 40L5 40L5 80\" stroke=\"#C5CCD0\" stroke-width=\"2px\"></path><path d=\"M0 75H10L5 80L0 75Z\" fill=\"#C5CCD0\"></path></svg></div><div class=\"blockelem noselect block\" style=\"left: 468.625px; top: 295px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenACandidateMovedToThisStage\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"2\">\n <div class=\"blockyleft\">\n <img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\" draggable=\"false\">\n <p class=\"blockyname\">New visitor</p>\n </div>\n <div class=\"blockyright\"><img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\"></div>\n <div class=\"blockydiv\"></div>\n <div class=\"blockyinfo\">When a <span>new visitor</span> goes to <span>Site 1</span></div>\n <div class=\"indicator invisible\" style=\"left: 154px; top: 94px;\"></div></div><div class=\"arrowblock\" style=\"left: 622.625px; top: 230px;\"><input type=\"hidden\" class=\"arrowid\" value=\"2\"><svg preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M174 0L174 40L5 40L5 80\" stroke=\"#C5CCD0\" stroke-width=\"2px\"></path><path d=\"M0 75H10L5 80L0 75Z\" fill=\"#C5CCD0\"></path></svg></div><div class=\"blockelem noselect block\" style=\"left: 130.625px; top: 469px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenACandidateMovedToThisStage\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"3\">\n <div class=\"blockyleft\">\n <img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\" draggable=\"false\">\n <p class=\"blockyname\">New visitor</p>\n </div>\n <div class=\"blockyright\"><img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\"></div>\n <div class=\"blockydiv\"></div>\n <div class=\"blockyinfo\">When a <span>new visitor</span> goes to <span>Site 1</span></div>\n </div><div class=\"arrowblock\" style=\"left: 269.625px; top: 404px;\"><input type=\"hidden\" class=\"arrowid\" value=\"3\"><svg preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0L20 40L20 40L20 80\" stroke=\"#C5CCD0\" stroke-width=\"2px\"></path><path d=\"M15 75H25L20 80L15 75Z\" fill=\"#C5CCD0\"></path></svg></div><div class=\"blockelem noselect block\" style=\"left: 806.625px; top: 295px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenACandidateMovedToThisStage\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"4\">\n <div class=\"blockyleft\">\n <img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\" draggable=\"false\">\n <p class=\"blockyname\">New visitor</p>\n </div>\n <div class=\"blockyright\"><img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\"></div>\n <div class=\"blockydiv\"></div>\n <div class=\"blockyinfo\">When a <span>new visitor</span> goes to <span>Site 1</span></div>\n </div><div class=\"arrowblock\" style=\"left: 776.625px; top: 230px;\"><input type=\"hidden\" class=\"arrowid\" value=\"4\"><svg preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0L20 40L189 40L189 80\" stroke=\"#C5CCD0\" stroke-width=\"2px\"></path><path d=\"M184 75H194L189 80L184 75Z\" fill=\"#C5CCD0\"></path></svg></div><div class=\"blockelem noselect block\" style=\"left: 1144.62px; top: 310px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenACandidateMovedToThisStage\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"5\">\n <div class=\"blockyleft\">\n <img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\" draggable=\"false\">\n <p class=\"blockyname\">New visitor</p>\n </div>\n <div class=\"blockyright\"><img src=\"function\" svgaddcircle(props)=\"\" {=\"\" return=\"\" react__webpack_imported_module_0___default.a.createelement(\"svg\",=\"\" _extends({=\"\" width:=\"\" \"1em\",=\"\" height:=\"\" viewbox:=\"\" \"0=\"\" 0=\"\" 23=\"\" 23\"=\"\" },=\"\" props),=\"\" react__webpack_imported_module_0___default.a.createelement(\"path\",=\"\" d:=\"\" \"m11.5=\"\" 0c5.149=\"\" 5.149=\"\" 11.5s5.149=\"\" 11.5=\"\" 17.851=\"\" 11.5a11.5=\"\" 0zm4.6=\"\" 12.075a.575.575=\"\" 1-.575.575h12.65v2.875a.575.575=\"\" 1-.575.575h-1.15a.575.575=\"\" 1-.575-.575v12.65h7.475a.575.575=\"\" 1-.575-.575v-1.15c0-.318.257-.575.575-.575h2.875v7.475c0-.318.257-.575.575-.575h1.15c.318=\"\" .575.257.575.575v2.875h2.875c.318=\"\" .575.257.575.575v1.15z\",=\"\" fill:=\"\" \"#2764c4\",=\"\" fillrule:=\"\" \"nonzero\"=\"\" }));=\"\" }=\"\"></div>\n <div class=\"blockydiv\"></div>\n <div class=\"blockyinfo\">When a <span>new visitor</span> goes to <span>Site 1</span></div>\n </div><div class=\"arrowblock\" style=\"left: 776.625px; top: 230px;\"><input type=\"hidden\" class=\"arrowid\" value=\"5\"><svg preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0L20 40L527 40L527 80\" stroke=\"#C5CCD0\" stroke-width=\"2px\"></path><path d=\"M522 75H532L527 80L522 75Z\" fill=\"#C5CCD0\"></path></svg></div><div class=\"blockelem noselect block\" style=\"left: 468.625px; top: 484px;\"><input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"whenAnInterviewIsScheduled\"><input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"6\"></div><div class=\"arrowblock\" style=\"left: 607.625px; top: 404px;\"><input type=\"hidden\" class=\"arrowid\" value=\"6\"><svg preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0L20 40L20 40L20 80\" stroke=\"#C5CCD0\" stroke-width=\"2px\"></path><path d=\"M15 75H25L20 80L15 75Z\" fill=\"#C5CCD0\"></path></svg></div>", "blockarr": [ { "parent": -1, "childwidth": 1332, "id": 0, "x": 1265.25, "y": 254, "width": 318, "height": 94 }, { "childwidth": 318, "parent": 0, "id": 1, "x": 758.25, "y": 428, "width": 318, "height": 94 }, { "childwidth": 318, "parent": 0, "id": 2, "x": 1096.25, "y": 428, "width": 318, "height": 94 }, { "childwidth": 0, "parent": 1, "id": 3, "x": 758.25, "y": 602, "width": 318, "height": 94 }, { "childwidth": 0, "parent": 0, "id": 4, "x": 1434.25, "y": 428, "width": 318, "height": 94 }, { "childwidth": 0, "parent": 0, "id": 5, "x": 1772.25, "y": 428, "width": 318, "height": 94 }, { "childwidth": 0, "parent": 2, "id": 6, "x": 1096.25, "y": 561, "width": 318, "height": 12 } ], "blocks": [ { "id": 0, "parent": -1, "data": [ { "name": "blockelemtype", "value": "whenACandidateMovedToThisStage" }, { "name": "blockid", "value": "0" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 527px; top: 121px;" } ] }, { "id": 1, "parent": 0, "data": [ { "name": "blockelemtype", "value": "whenACandidateMovedToThisStage" }, { "name": "blockid", "value": "1" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 130.625px; top: 295px;" } ] }, { "id": 2, "parent": 0, "data": [ { "name": "blockelemtype", "value": "whenACandidateMovedToThisStage" }, { "name": "blockid", "value": "2" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 468.625px; top: 295px;" } ] }, { "id": 3, "parent": 1, "data": [ { "name": "blockelemtype", "value": "whenACandidateMovedToThisStage" }, { "name": "blockid", "value": "3" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 130.625px; top: 469px;" } ] }, { "id": 4, "parent": 0, "data": [ { "name": "blockelemtype", "value": "whenACandidateMovedToThisStage" }, { "name": "blockid", "value": "4" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 806.625px; top: 295px;" } ] }, { "id": 5, "parent": 0, "data": [ { "name": "blockelemtype", "value": "whenACandidateMovedToThisStage" }, { "name": "blockid", "value": "5" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 1144.62px; top: 310px;" } ] }, { "id": 6, "parent": 2, "data": [ { "name": "blockelemtype", "value": "whenAnInterviewIsScheduled" }, { "name": "blockid", "value": "6" } ], "attr": [ { "class": "blockelem noselect block" }, { "style": "left: 468.625px; top: 484px;" } ] } ] }

[alyssaxuu]

All right. Are you using the latest version? I do notice one disparity right off the bat being line 645 in App.css, which gives the block a margin bottom - could be causing alignment issues when placing it in the canvas? It might be helpful to right click and inspect element the scenario above to determine whether the block has any margin/offset applied and it's not the library calculating its position or dimensions incorrectly.

[Kannndev]

Yeah, I took the latest code from this repo. The weird thing is when the same code is put on a page it works correctly. I haven't found any issues with that. These only happen only inside the modal. The reason for adding margin was when the element is at the bottom of the screen the scrollbar doesn't move beyond the last block. It was little difficult to see the indicator at that time. So I have added that.

[alyssaxuu]

Have you tried removing that line of code and see what happens? Because based on the offset you show in the first image it seems probable to be caused by the bottom margin.

[Kannndev]

Yes, @alyssaxuu I tried removing that and checked. I was still facing the same issue.

[Kannndev]

Another issue. I found is sometimes the arrow goes missing. This too happens only inside the modal. Please find the repro steps here.

[Kannndev]

@alyssaxuu Any thoughts?

[Kannndev]

@alyssaxuu I managed to fix the arrow issue by adding

.arrowblock svg {
  width: -webkit-fill-available;
  overflow: visible !important;
}

[alyssaxuu]

I'm closing this issue as it's specific to an unorthodox implementation of the library via React inside a modal. I am happy to help with questions regarding the library, but for custom integrations I have a tier in GitHub Sponsors to specifically help with that.