Not drawing to Target when position style is "absolute"

[Eliav2]

see here(the official example with a little change): https://codesandbox.io/s/react-archer-uses-wlqxv position: absolute not working well, and there is no option to offset arrow anchors by given property. any help?

[pierpo]

Hi! Why did you close your issue? Did you solve your problem?

[Eliav2]

yes friend - I understand that I suppose to make the position of the ArecherElement absolute and not the contained div - and this will do the trick i needed, thanks!

[Eliav2]

sorry friend but i need to reopen the issue because the position: absolute does not work on ArcherElemnets as it works on div (or any other regular element). ArcherElemnets are taking space when the position property is set to absolute and this is not correct - do you know how can i fix it? see demonstrations: https://codesandbox.io/s/react-archer-uses-wlqxv

[pierpo]

Thank you for the example @Eliav2 that is really helpful. What is the problem though?

I see only two problems:

• "middle" anchor is ugly (known issue). Is that what you're talking about?
• dragging does not refresh properly. I don't think I can solve this in general, so I think you need to re-trigger the refresh yourself with ref.refreshScreen. This lacks documentation and should be added.

[dooleyb1]

Hi @pierpo, thank you for the library. Really useful stuff. I'm having a similar use case for refreshScreen and am looking for how to use this method to force the re-render of the arrow components? Thanks 😄

[pierpo]

Hey @dooleyb1! Thank you for the kind words I really appreciate 😄

So, I added some documentation on the README about this yesterday. Can you tell me if it is enough? If not, I can assist you more and add more documentation 😊

[dooleyb1]

That does help thank you, I can see the arrows are now being redrawn however it turns out my issue is not directly related to this. I will open a new issue now and you can take a look if you like!

[dooleyb1]

That does help thank you, I can see the arrows are now being redrawn however it turns out my issue is not directly related to this. I will open a new issue now and you can take a look if you like!

This is here - https://github.com/pierpo/react-archer/issues/92

[escv]

Hi, is there any news about the absolute-position issue. With the recent version, it is not possible to set style attributes on the ArcherElement anymore. If my boxes have an absolute position, there are no connections drawn in my case. Many thanks and greetings

[pierpo]

Hey @escv ! I just read the thread again, and I thought it was solved. Can you show me an example of your problem?

[escv]

Thank you @pierpo for the quick response. This maybe due to a misconfiguration on my side. I created a simple example with absolute positions here https://codesandbox.io/s/vigorous-bogdan-1f90bh?file=/src/App.js Unfortunately, the arrows are not visible here. What could be the missing point here? Many thanks and best greetings, Andre

[pierpo]

Amazing, thank you for providing an example.

By inspecting this, I can see that something is wrong with the views. The height is 0 🤔

I also noticed that you use a very old version! Which can cause some layout issues. Would you be able to upgrade?

My recommendations:

• try to play around with the style so that the containers are not 0px large
• upgrade to more recent versions to avoid some layout issues with the elements

[pierpo]

Bumping to 4.2.0 + defining a style that sets a width+height solves your problem. Width+height is not the ideal solution but I'll let you figure out something better: my point is that it's not related to the lib 😊