{"action":"created","issue":{"url":"https://api.github.com/repos/ethanselzer/react-cursor-position/issues/4","repository_url":"https://api.github.com/repos/ethanselzer/react-cursor-position","labels_url":"https://api.github.com/repos/ethanselzer/react-cursor-position/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/ethanselzer/react-cursor-position/issues/4/comments","events_url":"https://api.github.com/repos/ethanselzer/react-cursor-position/issues/4/events","html_url":"https://github.com/ethanselzer/react-cursor-position/issues/4","id":209976362,"number":4,"title":"Wrong Coordinates when I have a single div centered using margin 0px auto ","user":{"login":"singhshashi","id":371601,"avatar_url":"https://avatars.githubusercontent.com/u/371601?v=3","gravatar_id":"","url":"https://api.github.com/users/singhshashi","html_url":"https://github.com/singhshashi","followers_url":"https://api.github.com/users/singhshashi/followers","following_url":"https://api.github.com/users/singhshashi/following{/other_user}","gists_url":"https://api.github.com/users/singhshashi/gists{/gist_id}","starred_url":"https://api.github.com/users/singhshashi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/singhshashi/subscriptions","organizations_url":"https://api.github.com/users/singhshashi/orgs","repos_url":"https://api.github.com/users/singhshashi/repos","events_url":"https://api.github.com/users/singhshashi/events{/privacy}","received_events_url":"https://api.github.com/users/singhshashi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-02-24T07:14:18Z","updated_at":"2017-02-25T02:11:38Z","closed_at":null,"body":"The library does not work as expected for a simple use case.  Please see the following:\r\n\r\n![react-cursor-position-bug](https://cloud.githubusercontent.com/assets/371601/23294401/4350cfa0-fa91-11e6-891b-18caf257e6b5.gif)\r\n\r\nI click to bring the focus on the browser screen and once that is there, you can see that the mouse is outside the div but it still shows as inside. The reason for this is that you are wrapping the child with a div and that is actually much wider because of the css I have used to center the child div which is grey. \r\n\r\nSo even though the pointer is outside the child div, since it is inside the div you have used to wrap, the values in cursorPosition is incorrect. I am not very sure whether the approach of wrapping in a div will work. "},"comment":{"url":"https://api.github.com/repos/ethanselzer/react-cursor-position/issues/comments/282451950","html_url":"https://github.com/ethanselzer/react-cursor-position/issues/4#issuecomment-282451950","issue_url":"https://api.github.com/repos/ethanselzer/react-cursor-position/issues/4","id":282451950,"user":{"login":"ethanselzer","id":460891,"avatar_url":"https://avatars.githubusercontent.com/u/460891?v=3","gravatar_id":"","url":"https://api.github.com/users/ethanselzer","html_url":"https://github.com/ethanselzer","followers_url":"https://api.github.com/users/ethanselzer/followers","following_url":"https://api.github.com/users/ethanselzer/following{/other_user}","gists_url":"https://api.github.com/users/ethanselzer/gists{/gist_id}","starred_url":"https://api.github.com/users/ethanselzer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ethanselzer/subscriptions","organizations_url":"https://api.github.com/users/ethanselzer/orgs","repos_url":"https://api.github.com/users/ethanselzer/repos","events_url":"https://api.github.com/users/ethanselzer/events{/privacy}","received_events_url":"https://api.github.com/users/ethanselzer/received_events","type":"User","site_admin":false},"created_at":"2017-02-25T02:11:38Z","updated_at":"2017-02-25T02:11:38Z","body":"@singhshashi - Thanks for raising this issue! I hope I can help out. I think the most common pattern for using react-cursor-position is to constrain the width of the element it renders. You can achieve this by wrapping it in a container or applying dimensions directly to ReactCursorPosition, using either the `className` or `style` props. Here is a [live example](http://codepen.io/ethanselzer/pen/ryayLK) you can experiment with. In your design, is it possible for you to apply a width to your ReactCursorComponent instance? \r\n\r\nRemember react-cursor-position is designed to track the mouse cursor relative to the element it renders, not its child elements.\r\n\r\nPlease let me know how it goes!\r\n\r\n"}}
{"actor":{"display_login":"ethanselzer"}}