Problem/Motivation

When the confirmation password field gets focused, the green ring is cropped on the left side.

Steps to reproduce:

  • Go to edit own user profile
  • Enter a value for the Password field (this will show the Confirm password)
  • Start typing on the Confirm Focus field. The focus on this field id hidden

Proposed resolution

It seems the focus is being hidden by the overflow: hidden property coming by parent element with class .js .password-confirm__confirm.
A possible solution could be to remove the overflow: hidden when it's opened.

Remaining tasks

Write patch.

User interface changes

The password focus won't be partially hidden anymore.

CommentFileSizeAuthor
#10 selected_8210.png75.74 KBKondratievaS
#9 interdiff_3-9.txt331 bytesswatichouhan012
#9 3101040-9.patch1008 bytesswatichouhan012
#6 Screenshot from 2019-12-16_after_patch.png114.5 KBvinodhini.e
#6 Screenshot_before_patch.png116.87 KBvinodhini.e
#5 interdiff_2-3.txt1.01 KBreinchek
#4 3101040-3.patch533 bytesreinchek
#2 3101040-2.patch968 bytesreinchek
#2 Schermata da 2019-12-15 22-58-39.png47.98 KBreinchek
password-focus.png29.26 KBckrina

Comments

ckrina created an issue. See original summary.

reinchek’s picture

reinchek
Location Napoli 🌋 🇵🇸
commented
StatusFileSize
new Schermata da 2019-12-15 22-58-39.png47.98 KB
new 3101040-2.patch968 bytes

I modified and compiled the claro theme without `overflow: hidden` rule. I think it's good solution because i see no any problematic consequence.

Attached the patch and a screenshot that show how modification works.

issue applyed

reinchek’s picture

reinchek
Location Napoli 🌋 🇵🇸
commented
Status: Active » Needs review
reinchek’s picture

reinchek
Location Napoli 🌋 🇵🇸
commented
StatusFileSize
new 3101040-3.patch533 bytes

I've uploaded a wrong patch. Follow correct one.

reinchek’s picture

reinchek
Location Napoli 🌋 🇵🇸
commented
StatusFileSize
new interdiff_2-3.txt1.01 KB
vinodhini.e’s picture

vinodhini.e commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot_before_patch.png116.87 KB
new Screenshot from 2019-12-16_after_patch.png114.5 KB

I have applied patch #4
I am attaching a screenshot before and after applying the patch, It works for me.

babarbadshah’s picture

babarbadshah commented

Patch #4 also works fine for me.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 4: 3101040-3.patch, failed testing. View results

swatichouhan012’s picture

swatichouhan012 commented
Status: Needs work » Needs review
StatusFileSize
new 3101040-9.patch1008 bytes
new interdiff_3-9.txt331 bytes

Hiii , Drupal core uses postcss in above patch there is only changes in form--password-confirm.pcss.css. i updated form--password-confirm.css file also, kindly review patch.

KondratievaS’s picture

KondratievaS commented
StatusFileSize
new selected_8210.png75.74 KB

Tested patch from #9 for desktop and mobile resolutions in Chrome, FF, IE, Safari browsers and result is OK

ok

KondratievaS’s picture

KondratievaS commented
Status: Needs review » Reviewed & tested by the community
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

I confirm too this is working as designed. 👏

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 9: 3101040-9.patch, failed testing. View results

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Reviewed & tested by the community

  • lauriii committed 73427bd on 9.1.x 
    Issue #3101040 by reinchek, swatichouhan012, Vinodhini.E, ckrina,...

  • lauriii committed eaa1505 on 9.0.x 
    Issue #3101040 by reinchek, swatichouhan012, Vinodhini.E, ckrina,...

  • lauriii committed 432ef9b on 8.9.x 
    Issue #3101040 by reinchek, swatichouhan012, Vinodhini.E, ckrina,...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Tested with IE 11, Edge, Firefox, Chrome, Chrome for Android, Safari and Safari for iOS and didn't see any regressions.

Committed 73427bd and pushed to 9.1.x, 9.0.x and 8.9.x. Thanks!

Status: Fixed » Closed (fixed)

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