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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

JohnAlbin’s picture

Forgot to mention this, but the password match widget gets hidden in the same way.

mcjim’s picture

The width of this is initially set in user.css

input.password-confirm,
input.password-field {
  width: 16em;
  margin-bottom: 0.4em;
}

It's overridden in seven/style.css, as this input element also has the .form-text class:

@media screen and (max-width: 600px) {
  #page {
    margin: 0 10px;
  }
  input.form-autocomplete,
  input.form-text,
  …
  …
  textarea.form-textarea,
  .form-select {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
  }

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.

mcjim’s picture

Status: Active » Needs review
FileSize
20.75 KB
172.53 KB
2.36 KB

OK, 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%.

rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

I 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.

catch’s picture

Status: Reviewed & tested by the community » Fixed

Looks great. Committed/pushed to 8.x.

echoz’s picture

Crazy. 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.

Priority: Major » Normal
Status: Fixed » Needs work
Issue tags: -Usability, -mobile, -d8mux

The last submitted patch, password-strength-checker-1864466-6.patch, failed testing.

echoz’s picture

Status: Needs work » Needs review
Issue tags: +Usability, +mobile, +d8mux
rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

I 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?

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Great, thanks for the follow-up!

Committed and pushed to 8.x.

Automatically closed -- issue fixed for 2 weeks with no activity.