{"action":"closed","issue":{"url":"https://api.github.com/repos/patternfly/patternfly/issues/844","repository_url":"https://api.github.com/repos/patternfly/patternfly","labels_url":"https://api.github.com/repos/patternfly/patternfly/issues/844/labels{/name}","comments_url":"https://api.github.com/repos/patternfly/patternfly/issues/844/comments","events_url":"https://api.github.com/repos/patternfly/patternfly/issues/844/events","html_url":"https://github.com/patternfly/patternfly/issues/844","id":274541667,"number":844,"title":"Sign in screen in mobile is covered by keyboards","user":{"login":"garrett","id":10246,"avatar_url":"https://avatars2.githubusercontent.com/u/10246?v=4","gravatar_id":"","url":"https://api.github.com/users/garrett","html_url":"https://github.com/garrett","followers_url":"https://api.github.com/users/garrett/followers","following_url":"https://api.github.com/users/garrett/following{/other_user}","gists_url":"https://api.github.com/users/garrett/gists{/gist_id}","starred_url":"https://api.github.com/users/garrett/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/garrett/subscriptions","organizations_url":"https://api.github.com/users/garrett/orgs","repos_url":"https://api.github.com/users/garrett/repos","events_url":"https://api.github.com/users/garrett/events{/privacy}","received_events_url":"https://api.github.com/users/garrett/received_events","type":"User","site_admin":false},"labels":[{"id":685253411,"url":"https://api.github.com/repos/patternfly/patternfly/labels/css","name":"css","color":"1d76db","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-11-16T14:47:58Z","updated_at":"2018-03-01T16:16:04Z","closed_at":"2018-03-01T16:16:04Z","author_association":"NONE","body":"PatternFly sign in screens are often covered by keyboards when trying to sign in from a mobile browser.\r\n\r\nThis affects both Chrome and Firefox (although Firefox _sometimes_ seems to try to accommodate a little bit by scrolling an element or two into the screen­ — but not always).\r\n\r\nHere are a few screenshots to illustrate the problem:\r\n\r\n## Example log in screen (in Chrome)\r\n\r\n| initial | focus |\r\n|---|---|\r\n| ![screenshot_20171116-151759](https://user-images.githubusercontent.com/10246/32895979-127a37c8-cae2-11e7-8926-5340eec4d4cf.png) | ![screenshot_20171116-151803](https://user-images.githubusercontent.com/10246/32895983-152b84fe-cae2-11e7-9ed3-7065cc79cd49.png) |\r\n\r\n## In the wild (in Firefox)\r\n\r\n| initial | focus |\r\n|---|---|\r\n| ![screenshot_20171116-151656](https://user-images.githubusercontent.com/10246/32896082-5ebbc9f8-cae2-11e7-89e8-11d0fb9383a2.png) | ![screenshot_20171116-151701](https://user-images.githubusercontent.com/10246/32896065-4edd7f2c-cae2-11e7-942e-450b5078f9cb.png) |\r\n\r\n---\r\n\r\n## Solution (recently implemented in Cockpit)\r\n\r\nI noticed this issue when we were implementing new navigation for Cockpit and was a bit frustrated signing in and having to scroll around as well as trying to enter text in the browser.\r\n\r\nMy solution was to use flexbox to reorder the elements in on smaller portrait screens (desktop & tablets are the same) so the sign in form is right at the top.\r\n\r\n| initial | focus |\r\n|---|---|\r\n| ![screenshot_20171114-122106](https://user-images.githubusercontent.com/10246/32777606-17a121aa-c937-11e7-84fb-ac2511707eb0.png) | ![screenshot_20171114-123513](https://user-images.githubusercontent.com/10246/32777933-6bb508c8-c938-11e7-8a77-ecd4e00e55ef.png) |\r\n\r\nFor Cockpit, the issue was @ https://github.com/cockpit-project/cockpit/issues/8035 and the changes we merged in are at https://github.com/cockpit-project/cockpit/pull/8092/files\r\n\r\nNotes: \r\n\r\n1. The CSS for our login page is copy/pasted from parts of PatternFly and is minimized and inlined. Still, the CSS I included should be able to be adapted pretty easily for inclusion.\r\n2. These changes also include some keyboard directives in the HTML for disabling auto-capitalization for usernames as well as in-line auto-correction."}}
{"actor":{"display_login":"LHinson"}}