Problem/Motivation
The password strength checker is hidden (twice) on mobile screens. First its hidden because the password/strength checker widget forces horizontal scrollbars on small viewports and the strength checker part is way off the right side of the viewport. And secondly, the strength checker is positioned (with CSS) underneath the right side of the password field, so you can barely see it.
Proposed resolution
Prevent the horizontal scrollbar and prevent the strength checker from being underneath the password field.
Remaining tasks
Determine the best method to fix the 2 related problems.
Comment | File | Size | Author |
---|---|---|---|
#6 | password-strength-checker-1864466-6.patch | 1.19 KB | echoz |
#6 | password_strength.png | 57.84 KB | echoz |
#3 | password-strength-checker-1864466-3.patch | 2.36 KB | mcjim |
#3 | iPhone simulator screenshot.png | 172.53 KB | mcjim |
#3 | IE 9 screenshot.png | 20.75 KB | mcjim |
Comments
Comment #1
JohnAlbinForgot to mention this, but the password match widget gets hidden in the same way.
Comment #2
mcjim CreditAttribution: mcjim commentedThe width of this is initially set in user.css
It's overridden in seven/style.css, as this input element also has the .form-text class:
We could add another override here to reset the width to something else, but tbh it could end up quite small.
Another option is to force the password checker beneath the input. I'll have a go at a patch for that.
Comment #3
mcjim CreditAttribution: mcjim commentedOK, here goes.
Made changes in user.js to append the markup for the password checker rather than prepend it (I don't know if I've missed any reason why it shouldn't be this way round?)
I've amended the CSS in user.css to remove the top-margin to line up the password checker on a desktop page-width.
I've amended the CSS in style.css to remove the floats when the small-width breakpoint kicks in and also to set the width of the parent wrappers to 100%.
Comment #4
rteijeiro CreditAttribution: rteijeiro commentedI have tested the patch and it seems ok in Chrome, Safari, Firefox and Opera.
Reviewed the code and everything seems right. Maybe it should be considered as RTBC.
Comment #5
catchLooks great. Committed/pushed to 8.x.
Comment #6
echoz CreditAttribution: echoz commentedCrazy. There were 2 issues for this, and #1887558: Password Strength indicator overlaps with input field in Narrow screens was committed 5 days before this one, this one created a month before, but still worked visually on top of the earlier commit. @mcjim, I like what you did switching the markup order in user.js. All I want to do here is cleanup the combination of the 2 patches.
From user.css, removing now unecessary css from my patch last week (zeroing out 2 top margins are no longer there). Then, the narrow viewport css you added to seven had been in part repeated in user.css, so I have moved and combined it there. We could put it all in seven/style.css if anyone would rather have it there. In user.css, it helps Bartik a bit, which is broken if left or all moved to seven.
Comment #8
echoz CreditAttribution: echoz commented#6: password-strength-checker-1864466-6.patch queued for re-testing.
Comment #9
rteijeiro CreditAttribution: rteijeiro commentedI have reviewed the patch and it seems to solve the issue.
Tested in Chrome, Firefox, Safari and Opera. Also tested in iPhone and everything looks ok.
Maybe RTBC?
Comment #10
webchickGreat, thanks for the follow-up!
Committed and pushed to 8.x.