{"action":"created","comment":{"url":"https://api.github.com/repos/alphagov/static/pulls/comments/27104318","id":27104318,"diff_hunk":"@@ -99,16 +102,50 @@\n     return this.$optionSelect.hasClass('js-closed');\n   };\n \n+  OptionSelect.prototype.setContainerHeight = function setContainerHeight(height){\n+    this.$optionsContainer.css({\n+      'max-height': 'none', // Have to clear the 'max-height' set by the CSS in order for 'height' to be applied\n+      'height': height\n+    });\n+  };\n+\n+  OptionSelect.prototype.isLabelVisible = function isLabelVisible(index, option){\n+    var $label = $(option);\n+    var initialOptionContainerHeight = this.$optionsContainer.height();\n+    var optionListOffsetTop = this.$optionList.offset().top;\n+    var distanceFromTopOfContainer = $label.offset().top - optionListOffsetTop;\n+    return distanceFromTopOfContainer < initialOptionContainerHeight;\n+  };\n+\n+  OptionSelect.prototype.getVisibleLabels = function getVisibleLabels(){\n+    return this.$labels.filter(this.isLabelVisible.bind(this));\n+  };\n+\n   OptionSelect.prototype.setupHeight = function setupHeight(){\n-    var optionsContainer = this.$optionSelect.find('.options-container');\n-    var optionList = optionsContainer.children('.js-auto-height-inner');\n-    var initialOptionContainerHeight = optionsContainer.height();\n-    var height = optionList.height();\n+    var initialOptionContainerHeight = this.$optionsContainer.height();\n+    var height = this.$optionList.height();\n+    var lastVisibleLabel;\n \n     if (height < initialOptionContainerHeight + 50) {\n       // Resize if the list is only slightly bigger than its container\n-      optionsContainer.height(optionList.height());\n+      this.setContainerHeight(height);\n+      return;\n     }\n+\n+    // Resize to cut last item cleanly in half\n+    lastVisibleLabel = this.getVisibleLabels().last();\n+\n+    this.setContainerHeight(\n+      lastVisibleLabel.position().top +\n+      parseInt(lastVisibleLabel.css('border-top-width'), 10) +\n+      parseInt(lastVisibleLabel.css('padding-top'), 10) +\n+      (parseInt(\n+        \"normal\" == lastVisibleLabel.css('line-height') ?\n+          lastVisibleLabel.css('font-size') : lastVisibleLabel.css('line-height'),\n+        10\n+      ) / 2)","path":"app/assets/javascripts/govuk-component/option-select.js","position":null,"original_position":60,"commit_id":"003426e61844d4fc6a51b8dae8e279905b2d4334","original_commit_id":"e3c544c617275ff4c8b3f755ae62db1dab8aa426","user":{"login":"quis","id":355079,"avatar_url":"https://avatars.githubusercontent.com/u/355079?v=3","gravatar_id":"","url":"https://api.github.com/users/quis","html_url":"https://github.com/quis","followers_url":"https://api.github.com/users/quis/followers","following_url":"https://api.github.com/users/quis/following{/other_user}","gists_url":"https://api.github.com/users/quis/gists{/gist_id}","starred_url":"https://api.github.com/users/quis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quis/subscriptions","organizations_url":"https://api.github.com/users/quis/orgs","repos_url":"https://api.github.com/users/quis/repos","events_url":"https://api.github.com/users/quis/events{/privacy}","received_events_url":"https://api.github.com/users/quis/received_events","type":"User","site_admin":false},"body":"@fofr Thanks for the feedback. Addressed this specific comment in 003426e.","created_at":"2015-03-25T09:19:48Z","updated_at":"2015-03-25T09:19:48Z","html_url":"https://github.com/alphagov/static/pull/556#discussion_r27104318","pull_request_url":"https://api.github.com/repos/alphagov/static/pulls/556","_links":{"self":{"href":"https://api.github.com/repos/alphagov/static/pulls/comments/27104318"},"html":{"href":"https://github.com/alphagov/static/pull/556#discussion_r27104318"},"pull_request":{"href":"https://api.github.com/repos/alphagov/static/pulls/556"}}},"pull_request":{"url":"https://api.github.com/repos/alphagov/static/pulls/556","id":30640264,"html_url":"https://github.com/alphagov/static/pull/556","diff_url":"https://github.com/alphagov/static/pull/556.diff","patch_url":"https://github.com/alphagov/static/pull/556.patch","issue_url":"https://api.github.com/repos/alphagov/static/issues/556","number":556,"state":"open","locked":false,"title":"Provide additional visual cue that option-select is scrollable","user":{"login":"quis","id":355079,"avatar_url":"https://avatars.githubusercontent.com/u/355079?v=3","gravatar_id":"","url":"https://api.github.com/users/quis","html_url":"https://github.com/quis","followers_url":"https://api.github.com/users/quis/followers","following_url":"https://api.github.com/users/quis/following{/other_user}","gists_url":"https://api.github.com/users/quis/gists{/gist_id}","starred_url":"https://api.github.com/users/quis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quis/subscriptions","organizations_url":"https://api.github.com/users/quis/orgs","repos_url":"https://api.github.com/users/quis/repos","events_url":"https://api.github.com/users/quis/events{/privacy}","received_events_url":"https://api.github.com/users/quis/received_events","type":"User","site_admin":false},"body":"## The problem\r\n\r\nIn research on the Digital Marketplace we have seen users not realise that the option-select has more options than those visible.\r\n\r\nOn certain combinations of browsers/operating system/number-of-lines-per-option it isn't clear that the component is scrollable. This is because the `max-height` of the container lines up with the bottom edge of the last visible option.\r\n\r\n## The solution\r\n\r\nThis pull request adds Javascript to adjust the height of the container so that the first line of the last visible option is always cut exactly in half horizontally.\r\n\r\nBefore | After\r\n--- | ---\r\n![before](https://cloud.githubusercontent.com/assets/355079/6524399/ed718832-c3f0-11e4-87b0-8eb0f9ffe262.png) | ![after](https://cloud.githubusercontent.com/assets/355079/6524405/f8b2a438-c3f0-11e4-9f1d-b11f4851e318.png)\r\n\r\n\r\nIt also works when the options wrap to multiple lines:\r\n![multiline](https://cloud.githubusercontent.com/assets/355079/6524397/e7eda288-c3f0-11e4-85e0-dc9abeddd598.png)\r\n\r\n## Feedback\r\n\r\nI'd especially like to know:\r\n- If there's a more thorough way to test this, without going as far as re-writing the logic from the component in the tests\r\n- If you can understand what the code is doing from reading it—the logic is somewhat complex so if it could be written in a more explicit way I'd welcome that","created_at":"2015-03-06T12:11:16Z","updated_at":"2015-03-25T09:19:48Z","closed_at":null,"merged_at":null,"merge_commit_sha":"ac60d426ac05469c6c83be081f0fb8f5edae0c77","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/alphagov/static/pulls/556/commits","review_comments_url":"https://api.github.com/repos/alphagov/static/pulls/556/comments","review_comment_url":"https://api.github.com/repos/alphagov/static/pulls/comments{/number}","comments_url":"https://api.github.com/repos/alphagov/static/issues/556/comments","statuses_url":"https://api.github.com/repos/alphagov/static/statuses/003426e61844d4fc6a51b8dae8e279905b2d4334","head":{"label":"quis:visually-cue-scrolling","ref":"visually-cue-scrolling","sha":"003426e61844d4fc6a51b8dae8e279905b2d4334","user":{"login":"quis","id":355079,"avatar_url":"https://avatars.githubusercontent.com/u/355079?v=3","gravatar_id":"","url":"https://api.github.com/users/quis","html_url":"https://github.com/quis","followers_url":"https://api.github.com/users/quis/followers","following_url":"https://api.github.com/users/quis/following{/other_user}","gists_url":"https://api.github.com/users/quis/gists{/gist_id}","starred_url":"https://api.github.com/users/quis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quis/subscriptions","organizations_url":"https://api.github.com/users/quis/orgs","repos_url":"https://api.github.com/users/quis/repos","events_url":"https://api.github.com/users/quis/events{/privacy}","received_events_url":"https://api.github.com/users/quis/received_events","type":"User","site_admin":false},"repo":{"id":30591111,"name":"static","full_name":"quis/static","owner":{"login":"quis","id":355079,"avatar_url":"https://avatars.githubusercontent.com/u/355079?v=3","gravatar_id":"","url":"https://api.github.com/users/quis","html_url":"https://github.com/quis","followers_url":"https://api.github.com/users/quis/followers","following_url":"https://api.github.com/users/quis/following{/other_user}","gists_url":"https://api.github.com/users/quis/gists{/gist_id}","starred_url":"https://api.github.com/users/quis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/quis/subscriptions","organizations_url":"https://api.github.com/users/quis/orgs","repos_url":"https://api.github.com/users/quis/repos","events_url":"https://api.github.com/users/quis/events{/privacy}","received_events_url":"https://api.github.com/users/quis/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/quis/static","description":"GOV.UK static files/resources","fork":true,"url":"https://api.github.com/repos/quis/static","forks_url":"https://api.github.com/repos/quis/static/forks","keys_url":"https://api.github.com/repos/quis/static/keys{/key_id}","collaborators_url":"https://api.github.com/repos/quis/static/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/quis/static/teams","hooks_url":"https://api.github.com/repos/quis/static/hooks","issue_events_url":"https://api.github.com/repos/quis/static/issues/events{/number}","events_url":"https://api.github.com/repos/quis/static/events","assignees_url":"https://api.github.com/repos/quis/static/assignees{/user}","branches_url":"https://api.github.com/repos/quis/static/branches{/branch}","tags_url":"https://api.github.com/repos/quis/static/tags","blobs_url":"https://api.github.com/repos/quis/static/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/quis/static/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/quis/static/git/refs{/sha}","trees_url":"https://api.github.com/repos/quis/static/git/trees{/sha}","statuses_url":"https://api.github.com/repos/quis/static/statuses/{sha}","languages_url":"https://api.github.com/repos/quis/static/languages","stargazers_url":"https://api.github.com/repos/quis/static/stargazers","contributors_url":"https://api.github.com/repos/quis/static/contributors","subscribers_url":"https://api.github.com/repos/quis/static/subscribers","subscription_url":"https://api.github.com/repos/quis/static/subscription","commits_url":"https://api.github.com/repos/quis/static/commits{/sha}","git_commits_url":"https://api.github.com/repos/quis/static/git/commits{/sha}","comments_url":"https://api.github.com/repos/quis/static/comments{/number}","issue_comment_url":"https://api.github.com/repos/quis/static/issues/comments{/number}","contents_url":"https://api.github.com/repos/quis/static/contents/{+path}","compare_url":"https://api.github.com/repos/quis/static/compare/{base}...{head}","merges_url":"https://api.github.com/repos/quis/static/merges","archive_url":"https://api.github.com/repos/quis/static/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/quis/static/downloads","issues_url":"https://api.github.com/repos/quis/static/issues{/number}","pulls_url":"https://api.github.com/repos/quis/static/pulls{/number}","milestones_url":"https://api.github.com/repos/quis/static/milestones{/number}","notifications_url":"https://api.github.com/repos/quis/static/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/quis/static/labels{/name}","releases_url":"https://api.github.com/repos/quis/static/releases{/id}","created_at":"2015-02-10T12:31:17Z","updated_at":"2015-02-10T12:31:20Z","pushed_at":"2015-03-25T09:17:25Z","git_url":"git://github.com/quis/static.git","ssh_url":"git@github.com:quis/static.git","clone_url":"https://github.com/quis/static.git","svn_url":"https://github.com/quis/static","homepage":"","size":20929,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"alphagov:master","ref":"master","sha":"3338b8dd7da44f1503878a4f03d1af189d8478c6","user":{"login":"alphagov","id":596977,"avatar_url":"https://avatars.githubusercontent.com/u/596977?v=3","gravatar_id":"","url":"https://api.github.com/users/alphagov","html_url":"https://github.com/alphagov","followers_url":"https://api.github.com/users/alphagov/followers","following_url":"https://api.github.com/users/alphagov/following{/other_user}","gists_url":"https://api.github.com/users/alphagov/gists{/gist_id}","starred_url":"https://api.github.com/users/alphagov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alphagov/subscriptions","organizations_url":"https://api.github.com/users/alphagov/orgs","repos_url":"https://api.github.com/users/alphagov/repos","events_url":"https://api.github.com/users/alphagov/events{/privacy}","received_events_url":"https://api.github.com/users/alphagov/received_events","type":"Organization","site_admin":false},"repo":{"id":1599151,"name":"static","full_name":"alphagov/static","owner":{"login":"alphagov","id":596977,"avatar_url":"https://avatars.githubusercontent.com/u/596977?v=3","gravatar_id":"","url":"https://api.github.com/users/alphagov","html_url":"https://github.com/alphagov","followers_url":"https://api.github.com/users/alphagov/followers","following_url":"https://api.github.com/users/alphagov/following{/other_user}","gists_url":"https://api.github.com/users/alphagov/gists{/gist_id}","starred_url":"https://api.github.com/users/alphagov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alphagov/subscriptions","organizations_url":"https://api.github.com/users/alphagov/orgs","repos_url":"https://api.github.com/users/alphagov/repos","events_url":"https://api.github.com/users/alphagov/events{/privacy}","received_events_url":"https://api.github.com/users/alphagov/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/alphagov/static","description":"GOV.UK static files/resources","fork":false,"url":"https://api.github.com/repos/alphagov/static","forks_url":"https://api.github.com/repos/alphagov/static/forks","keys_url":"https://api.github.com/repos/alphagov/static/keys{/key_id}","collaborators_url":"https://api.github.com/repos/alphagov/static/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/alphagov/static/teams","hooks_url":"https://api.github.com/repos/alphagov/static/hooks","issue_events_url":"https://api.github.com/repos/alphagov/static/issues/events{/number}","events_url":"https://api.github.com/repos/alphagov/static/events","assignees_url":"https://api.github.com/repos/alphagov/static/assignees{/user}","branches_url":"https://api.github.com/repos/alphagov/static/branches{/branch}","tags_url":"https://api.github.com/repos/alphagov/static/tags","blobs_url":"https://api.github.com/repos/alphagov/static/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/alphagov/static/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/alphagov/static/git/refs{/sha}","trees_url":"https://api.github.com/repos/alphagov/static/git/trees{/sha}","statuses_url":"https://api.github.com/repos/alphagov/static/statuses/{sha}","languages_url":"https://api.github.com/repos/alphagov/static/languages","stargazers_url":"https://api.github.com/repos/alphagov/static/stargazers","contributors_url":"https://api.github.com/repos/alphagov/static/contributors","subscribers_url":"https://api.github.com/repos/alphagov/static/subscribers","subscription_url":"https://api.github.com/repos/alphagov/static/subscription","commits_url":"https://api.github.com/repos/alphagov/static/commits{/sha}","git_commits_url":"https://api.github.com/repos/alphagov/static/git/commits{/sha}","comments_url":"https://api.github.com/repos/alphagov/static/comments{/number}","issue_comment_url":"https://api.github.com/repos/alphagov/static/issues/comments{/number}","contents_url":"https://api.github.com/repos/alphagov/static/contents/{+path}","compare_url":"https://api.github.com/repos/alphagov/static/compare/{base}...{head}","merges_url":"https://api.github.com/repos/alphagov/static/merges","archive_url":"https://api.github.com/repos/alphagov/static/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/alphagov/static/downloads","issues_url":"https://api.github.com/repos/alphagov/static/issues{/number}","pulls_url":"https://api.github.com/repos/alphagov/static/pulls{/number}","milestones_url":"https://api.github.com/repos/alphagov/static/milestones{/number}","notifications_url":"https://api.github.com/repos/alphagov/static/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/alphagov/static/labels{/name}","releases_url":"https://api.github.com/repos/alphagov/static/releases{/id}","created_at":"2011-04-11T13:42:56Z","updated_at":"2015-03-23T16:23:37Z","pushed_at":"2015-03-25T09:17:26Z","git_url":"git://github.com/alphagov/static.git","ssh_url":"git@github.com:alphagov/static.git","clone_url":"https://github.com/alphagov/static.git","svn_url":"https://github.com/alphagov/static","homepage":"","size":28614,"stargazers_count":65,"watchers_count":65,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":26,"mirror_url":null,"open_issues_count":4,"forks":26,"open_issues":4,"watchers":65,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/alphagov/static/pulls/556"},"html":{"href":"https://github.com/alphagov/static/pull/556"},"issue":{"href":"https://api.github.com/repos/alphagov/static/issues/556"},"comments":{"href":"https://api.github.com/repos/alphagov/static/issues/556/comments"},"review_comments":{"href":"https://api.github.com/repos/alphagov/static/pulls/556/comments"},"review_comment":{"href":"https://api.github.com/repos/alphagov/static/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/alphagov/static/pulls/556/commits"},"statuses":{"href":"https://api.github.com/repos/alphagov/static/statuses/003426e61844d4fc6a51b8dae8e279905b2d4334"}}}}