{"action":"created","issue":{"url":"https://api.github.com/repos/atlassian/react-beautiful-dnd/issues/889","repository_url":"https://api.github.com/repos/atlassian/react-beautiful-dnd","labels_url":"https://api.github.com/repos/atlassian/react-beautiful-dnd/issues/889/labels{/name}","comments_url":"https://api.github.com/repos/atlassian/react-beautiful-dnd/issues/889/comments","events_url":"https://api.github.com/repos/atlassian/react-beautiful-dnd/issues/889/events","html_url":"https://github.com/atlassian/react-beautiful-dnd/issues/889","id":376993150,"node_id":"MDU6SXNzdWUzNzY5OTMxNTA=","number":889,"title":"Horizontal droppable with a max-width narrower than contents has jittery effect on far right","user":{"login":"instadrew","id":3877554,"node_id":"MDQ6VXNlcjM4Nzc1NTQ=","avatar_url":"https://avatars2.githubusercontent.com/u/3877554?v=4","gravatar_id":"","url":"https://api.github.com/users/instadrew","html_url":"https://github.com/instadrew","followers_url":"https://api.github.com/users/instadrew/followers","following_url":"https://api.github.com/users/instadrew/following{/other_user}","gists_url":"https://api.github.com/users/instadrew/gists{/gist_id}","starred_url":"https://api.github.com/users/instadrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/instadrew/subscriptions","organizations_url":"https://api.github.com/users/instadrew/orgs","repos_url":"https://api.github.com/users/instadrew/repos","events_url":"https://api.github.com/users/instadrew/events{/privacy}","received_events_url":"https://api.github.com/users/instadrew/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-11-02T23:00:32Z","updated_at":"2018-11-07T14:48:00Z","closed_at":null,"author_association":"NONE","body":"## Bug or feature request?\r\nAdditional documentation request, and possibly a bug. Seeking more documentation on setting a horizontal droppable with more draggables inside than can be shown without scrolling due to a max-width set on the div, but without resulting in a jittery effect and difficulty dropping to the far right end of the droppable.\r\n\r\nI'd also like to know how to hide the horizontal scrollbar after dropping as shown in one of the react-beautiful-dnd demos.\r\n\r\nI have reviewed the tutorial at https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd, but have run into the problems described below.\r\n\r\n### What version of `React` are you using?\r\n16.4.1\r\n\r\n### What version of `react-beautiful-dnd` are you running?\r\n9.0.2\r\n\r\n### What browser are you using?\r\nChrome Version 70.0.3538.77 (Official Build) (64-bit) on MacOS 10.14\r\n\r\n### Question\r\nThe react-beautiful-dnd \"Auto scrolling\" demo at: \r\n\r\nhttps://github.com/atlassian/react-beautiful-dnd#auto-scrolling \r\n\r\nshows:\r\n1. a vertically bounded droppable area (not bounded by the page, but seemingly by a div with a set height) that scrolls as needed when dragging\r\n1. a scrollbar that disappears after the draggable has been dropped\r\n\r\nI would like to do the same thing for a horizontal droppable area.  I have tried editing the react-beautiful-dnd demo at:\r\n\r\nhttps://mmrp44okvj.codesandbox.io/\r\n\r\nby setting:\r\n\r\n```css\r\nmax-width: 300px;\r\n```\r\n\r\non the droppable div.  But this results in a jittery effect when dragging to the far right, and difficulty dropping to the right of the last draggable since no empty space opens on the far right.\r\n\r\nSo, I'm wondering:\r\n1. how to set up a horizontal draggable with a width smaller than allows all draggables to be shown at once, but does not result in the jittery behavior described above\r\n1. how to make the scrollbar disappear after the draggable has been dropped"},"comment":{"url":"https://api.github.com/repos/atlassian/react-beautiful-dnd/issues/comments/436647289","html_url":"https://github.com/atlassian/react-beautiful-dnd/issues/889#issuecomment-436647289","issue_url":"https://api.github.com/repos/atlassian/react-beautiful-dnd/issues/889","id":436647289,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNjY0NzI4OQ==","user":{"login":"instadrew","id":3877554,"node_id":"MDQ6VXNlcjM4Nzc1NTQ=","avatar_url":"https://avatars2.githubusercontent.com/u/3877554?v=4","gravatar_id":"","url":"https://api.github.com/users/instadrew","html_url":"https://github.com/instadrew","followers_url":"https://api.github.com/users/instadrew/followers","following_url":"https://api.github.com/users/instadrew/following{/other_user}","gists_url":"https://api.github.com/users/instadrew/gists{/gist_id}","starred_url":"https://api.github.com/users/instadrew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/instadrew/subscriptions","organizations_url":"https://api.github.com/users/instadrew/orgs","repos_url":"https://api.github.com/users/instadrew/repos","events_url":"https://api.github.com/users/instadrew/events{/privacy}","received_events_url":"https://api.github.com/users/instadrew/received_events","type":"User","site_admin":false},"created_at":"2018-11-07T14:48:00Z","updated_at":"2018-11-07T14:48:00Z","author_association":"NONE","body":"Thank you.  I tried using `react-beautiful-dnd-next` but the same jittery problem occurs when dragging to the far right."}}
{"actor":{"display_login":"instadrew"}}