{"action":"created","issue":{"url":"https://api.github.com/repos/nathancahill/Split.js/issues/164","repository_url":"https://api.github.com/repos/nathancahill/Split.js","labels_url":"https://api.github.com/repos/nathancahill/Split.js/issues/164/labels{/name}","comments_url":"https://api.github.com/repos/nathancahill/Split.js/issues/164/comments","events_url":"https://api.github.com/repos/nathancahill/Split.js/issues/164/events","html_url":"https://github.com/nathancahill/Split.js/issues/164","id":374105188,"node_id":"MDU6SXNzdWUzNzQxMDUxODg=","number":164,"title":"Gutter width is not factored in to the minSize, leading to overflow","user":{"login":"Autre31415","id":8182831,"node_id":"MDQ6VXNlcjgxODI4MzE=","avatar_url":"https://avatars0.githubusercontent.com/u/8182831?v=4","gravatar_id":"","url":"https://api.github.com/users/Autre31415","html_url":"https://github.com/Autre31415","followers_url":"https://api.github.com/users/Autre31415/followers","following_url":"https://api.github.com/users/Autre31415/following{/other_user}","gists_url":"https://api.github.com/users/Autre31415/gists{/gist_id}","starred_url":"https://api.github.com/users/Autre31415/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Autre31415/subscriptions","organizations_url":"https://api.github.com/users/Autre31415/orgs","repos_url":"https://api.github.com/users/Autre31415/repos","events_url":"https://api.github.com/users/Autre31415/events{/privacy}","received_events_url":"https://api.github.com/users/Autre31415/received_events","type":"User","site_admin":false},"labels":[{"id":253969280,"node_id":"MDU6TGFiZWwyNTM5NjkyODA=","url":"https://api.github.com/repos/nathancahill/Split.js/labels/bug","name":"bug","color":"fc2929","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-10-25T19:50:48Z","updated_at":"2018-10-26T06:30:26Z","closed_at":null,"author_association":"NONE","body":"I have a 3 pane horizontal view configured this way:\r\n\r\n```\r\nsizes: [10, 15, 75],\r\nminSize: [0, 0, 0],\r\ngutterSize: 2\r\n```\r\n\r\nI've added a button that when clicked \"collapses\" the first pane via `setSizes([0, 15, 85])`. (I did this instead of `collapse` so that I could allocate space to the last pane and not the second pane)\r\n\r\nThe problem is, when the first panel is collapsed, the third panel will get pushed down under the first two. This is happening because the size of the panels is calculated in an uneven way as follows:\r\n\r\nPane 1: `width: calc(10% - 1px)`\r\nPane 2: `width: calc(15% - 2px)`\r\nPane 3: `width: calc(75% - 1px)`\r\n\r\nThe width of the first gutter is being split in half across the first and last panes, which works perfectly fine when all 3 panes are in view, but once the first pane gets collapsed (Which renders the width of pane 1 to `calc(0% - 1px`) that half of that gutter isn't being subtracted from anywhere anymore which causes the series to add up to 1px more than 100%, and the third pane to get pushed down to a new line.\r\n\r\nLooking over the API I see it's possible to interact with how the elements are sized via `elementStyle`, though I'm not sure if there's a supported way to interact with the sizing in a way that targets specific elements rather than the whole set (In my case the problem would be solved if pane 2 and 3 subtracted 2px each while the first subtracted none)"},"comment":{"url":"https://api.github.com/repos/nathancahill/Split.js/issues/comments/433301325","html_url":"https://github.com/nathancahill/Split.js/issues/164#issuecomment-433301325","issue_url":"https://api.github.com/repos/nathancahill/Split.js/issues/164","id":433301325,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMzMwMTMyNQ==","user":{"login":"Autre31415","id":8182831,"node_id":"MDQ6VXNlcjgxODI4MzE=","avatar_url":"https://avatars0.githubusercontent.com/u/8182831?v=4","gravatar_id":"","url":"https://api.github.com/users/Autre31415","html_url":"https://github.com/Autre31415","followers_url":"https://api.github.com/users/Autre31415/followers","following_url":"https://api.github.com/users/Autre31415/following{/other_user}","gists_url":"https://api.github.com/users/Autre31415/gists{/gist_id}","starred_url":"https://api.github.com/users/Autre31415/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Autre31415/subscriptions","organizations_url":"https://api.github.com/users/Autre31415/orgs","repos_url":"https://api.github.com/users/Autre31415/repos","events_url":"https://api.github.com/users/Autre31415/events{/privacy}","received_events_url":"https://api.github.com/users/Autre31415/received_events","type":"User","site_admin":false},"created_at":"2018-10-26T06:30:26Z","updated_at":"2018-10-26T06:30:26Z","author_association":"NONE","body":"Oh I see the problem. In my current implementation I'm dynamically sizing the elements to preserve their relative sizes when the collapse happens like this:\r\n\r\n```\r\nlet [pane1, pane2, pane3] = splitInstance.getSizes()\r\n\r\nif (/* hide is toggled on */) {\r\n  splitInstance.setSizes([0, pane2, pane3 - 10])\r\n} else { /* when hide is toggled off */\r\n  splitInstance.setSizes([10, pane2, pane3 + 10])\r\n}\r\n```\r\n\r\nThis worked previously, but now with the width being augmented dynamically upon collapse to account for the gutter I'm grabbing that new size and applying it inadvertently."}}
{"actor":{"display_login":"Autre31415"}}