{"action":"created","issue":{"url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/20","repository_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper","labels_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/20/comments","events_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/20/events","html_url":"https://github.com/alexbrillant/react-native-deck-swiper/issues/20","id":238944442,"number":20,"title":"Card width and height calculated from window dimensions, but it should use the container's","user":{"login":"gpuenteallott","id":1557348,"avatar_url":"https://avatars3.githubusercontent.com/u/1557348?v=4","gravatar_id":"","url":"https://api.github.com/users/gpuenteallott","html_url":"https://github.com/gpuenteallott","followers_url":"https://api.github.com/users/gpuenteallott/followers","following_url":"https://api.github.com/users/gpuenteallott/following{/other_user}","gists_url":"https://api.github.com/users/gpuenteallott/gists{/gist_id}","starred_url":"https://api.github.com/users/gpuenteallott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gpuenteallott/subscriptions","organizations_url":"https://api.github.com/users/gpuenteallott/orgs","repos_url":"https://api.github.com/users/gpuenteallott/repos","events_url":"https://api.github.com/users/gpuenteallott/events{/privacy}","received_events_url":"https://api.github.com/users/gpuenteallott/received_events","type":"User","site_admin":false},"labels":[{"id":579536052,"url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/labels/enhancement","name":"enhancement","color":"84b6eb","default":true},{"id":579536053,"url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/labels/help%20wanted","name":"help wanted","color":"128A0C","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-06-27T18:40:31Z","updated_at":"2018-01-01T11:10:43Z","closed_at":null,"author_association":"NONE","body":"### Problem\r\n\r\nCard height/width are currently calculated from window dimensions. \r\n\r\n<img width=\"443\" alt=\"screenshot 2017-06-27 20 32 24\" src=\"https://user-images.githubusercontent.com/1557348/27603838-c319e20c-5b77-11e7-9456-a64849e859b8.png\">\r\n[...]\r\n<img width=\"539\" alt=\"screenshot 2017-06-27 20 32 52\" src=\"https://user-images.githubusercontent.com/1557348/27603859-d07974b2-5b77-11e7-8109-aacf1dd7069f.png\">\r\n\r\nThis works well for a full screen deck swiper. However, it's not correct if the deck swiper is used inside a container with other dimensions. Cards currently will overflow and most likely render partially outside of the screen. My specific use case is having a header and a deck container that grows to fill remaining screen size.\r\n\r\n![screen recording 2017-06-27 at 08 38 pm](https://user-images.githubusercontent.com/1557348/27604109-aed82776-5b78-11e7-8c8c-144029e327d7.gif)\r\n\r\n### Solution\r\n\r\nI suggest updating implementation so that card dimensions are calculated from the Swiper component dimensions, instead of the window.\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/comments/354648013","html_url":"https://github.com/alexbrillant/react-native-deck-swiper/issues/20#issuecomment-354648013","issue_url":"https://api.github.com/repos/alexbrillant/react-native-deck-swiper/issues/20","id":354648013,"user":{"login":"asciifaceman","id":1619591,"avatar_url":"https://avatars3.githubusercontent.com/u/1619591?v=4","gravatar_id":"","url":"https://api.github.com/users/asciifaceman","html_url":"https://github.com/asciifaceman","followers_url":"https://api.github.com/users/asciifaceman/followers","following_url":"https://api.github.com/users/asciifaceman/following{/other_user}","gists_url":"https://api.github.com/users/asciifaceman/gists{/gist_id}","starred_url":"https://api.github.com/users/asciifaceman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/asciifaceman/subscriptions","organizations_url":"https://api.github.com/users/asciifaceman/orgs","repos_url":"https://api.github.com/users/asciifaceman/repos","events_url":"https://api.github.com/users/asciifaceman/events{/privacy}","received_events_url":"https://api.github.com/users/asciifaceman/received_events","type":"User","site_admin":false},"created_at":"2018-01-01T11:10:43Z","updated_at":"2018-01-01T11:10:43Z","author_association":"NONE","body":"my modifications:\r\n\r\n```\r\n\r\n  initializeCardStyle = () => {\r\n  //cardInputWidth: PropTypes.number,\r\n  //cardInputHeight: PropTypes.number,\r\n    const {\r\n      cardVerticalMargin,\r\n      cardHorizontalMargin,\r\n      cardInputWidth,\r\n      cardInputHeight,\r\n      heightDivisor,\r\n      widthDivisor,\r\n      marginTop,\r\n      marginBottom\r\n    } = this.props\r\n\r\n    var cardWidthTemp = 0;\r\n    var cardHeightTemp = 0;\r\n    if (!cardInputWidth) {\r\n     cardWidthTemp = (width - cardHorizontalMargin * 2) / widthDivisor;\r\n    } else {\r\n      cardWidthTemp = cardInputWidth;\r\n    }\r\n    if (!cardInputHeight) {\r\n      cardHeightTemp = (height - cardVerticalMargin * 2 - marginTop - marginBottom) / heightDivisor; //1.3\r\n    } else {\r\n      cardHeightTemp = cardInputHeight;\r\n    }\r\n\r\n    const cardWidth = cardWidthTemp;\r\n    const cardHeight = cardHeightTemp;\r\n\r\n    this.cardStyle = {\r\n      top: cardVerticalMargin,\r\n      alignSelf: 'center',\r\n      width: cardWidth,\r\n      height: cardHeight\r\n    }\r\n\r\n    this.customCardStyle = this.props.cardStyle\r\n  }\r\n```"}}
{"actor":{"display_login":"asciifaceman"}}