Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The password text entry and Hide/Show button overlap for long passwords #5614

Open
nagisa opened this issue Dec 15, 2022 · 4 comments · May be fixed by #5621
Open

The password text entry and Hide/Show button overlap for long passwords #5614

nagisa opened this issue Dec 15, 2022 · 4 comments · May be fixed by #5621
Assignees
@KshitizSareen

Comments

@nagisa
Copy link

nagisa commented Dec 15, 2022

Screenshot of the Android app showing the login screen with an extremely long password entered. This password overlaps/underlaps the Show/Hide button that's inside the entry field on the right side of it
@nagisa
Copy link
Author

nagisa commented Dec 15, 2022

This gets easier to trigger if the password is actually shown as the letters tend to be wider than the dots.

@KshitizSareen
Copy link

I'm working on this issue and would like to claim it.

This was referenced Dec 20, 2022
Closed
Open
@chrisbobbe
Copy link
Contributor

Thanks, @KshitizSareen! I have just assigned the issue to you.

@KshitizSareen
Copy link

Thank you @chrisbobbe

KshitizSareen added a commit to KshitizSareen/zulip-mobile that referenced this issue Jan 26, 2023
@KshitizSareen
PasswordInput: Fixed overlap for password and show/hide button Fixes: z…
6646847 
…ulip#5614
KshitizSareen added a commit to KshitizSareen/zulip-mobile that referenced this issue Jan 26, 2023
@KshitizSareen
PasswordInput: Fixed Overlap for long Passwords and show/hide button
d3cf64a 
Long Passwords and show/hide buttons overlap with each other. I fixed this problem by doing the following:

- I changed the style of Password Text Input to take up as much space as needed. I did this by setting a flex of 1 to the password text input.

- I changed the positioning of the show/hide button from absolute to relative.

- I ensured Horizontal Alignment by setting the flex-direction of the parent view to 'row'.

- To fix the problem of the changing width of the text input, when the show/hide text changes, I replaced the show/hide text with a show/icon. The show/hide icon is an eye-open/eye-closed icon. This icon always has a fixed width and does not affect the text input.

I tested this on Android and IOS devices with different screen sizes, and it works fine on both platforms.

Fixes: zulip#5614
KshitizSareen added a commit to KshitizSareen/zulip-mobile that referenced this issue Jan 26, 2023
@KshitizSareen
PasswordInput: Fixed Overlap for long Passwords and show/hide button
9b1065c 
Long Passwords and show/hide buttons overlap with each other.
I fixed this problem by doing the following:

- I changed the style of Password Text Input to take up as much space as needed. I did this by setting a flex of 1 to the password text input.

- I changed the positioning of the show/hide button from absolute to relative.

- I ensured Horizontal Alignment by setting the flex-direction of the parent view to 'row'.

- To fix the problem of the changing width of the text input, when the show/hide text changes, I replaced the show/hide text with a show/icon. The show/hide icon is an eye-open/eye-closed icon. This icon always has a fixed width and does not affect the text input.

- I removed hide text from messages_en.json since it is not in the app.

I tested this on Android and IOS devices with different screen sizes, and it works fine on both platforms.

Fixes: zulip#5614
KshitizSareen added a commit to KshitizSareen/zulip-mobile that referenced this issue Feb 9, 2023
@KshitizSareen
PasswordInput: Fix overlap for long passwords and show/hide button
5bbfcf2 
Long passwords and show/hide buttons overlap with each other. I fixed
this problem by doing the following:

- I changed the style of Password Input to take up as much space as
  needed. I did this by setting a flex of 1 to the Password Input.

- I changed the positioning of the show/hide button from absolute to
  relative.

- I ensured horizontal alignment by setting the flex-direction of the
  parent view to 'row'.

- To fix the problem of the changing width of the text input, when the
  show/hide text changes, I replaced the show/hide text with a
  show/icon. The show/hide icon is an eye-open/eye-closed icon. This
  icon always has a fixed width and does not affect the text input.

- I removed hide text from messages_en.json since it is not in the app.

I tested this on Android and IOS devices with different screen sizes,
and it works fine on both platforms.

Fixes: zulip#5614
KshitizSareen added a commit to KshitizSareen/zulip-mobile that referenced this issue Feb 9, 2023
@KshitizSareen
PasswordInput: Fix overlap for long passwords and show/hide button
6a8246d 
Long passwords and show/hide buttons overlap with each other. I
fixed this problem by doing the following:

- I changed the style of Password Input to take up as much space as
  needed. I did this by setting a flex of 1 to the Password Input.

- I changed the positioning of the show/hide button from absolute to
  relative.

- I ensured horizontal alignment by setting the flex-direction of
  the parent view to 'row'.

- To fix the problem of the changing width of the text input, when
  the show/hide text changes, I replaced the show/hide text with a
  show/icon. The show/hide icon is an eye-open/eye-closed icon. This
  icon always has a fixed width and does not affect the text input.

- I removed hide text from messages_en.json since it is not in the
  app.

I tested this on Android and IOS devices with different screen
sizes, and it works fine on both platforms.

Fixes: zulip#5614
chrisbobbe pushed a commit to KshitizSareen/zulip-mobile that referenced this issue Feb 10, 2023
@KshitizSareen @chrisbobbe
PasswordInput: Fix overlap for long passwords and show/hide button
c0d475a 
Long passwords and show/hide buttons overlap with each other. I
fixed this problem by doing the following:

- I changed the style of Password Input to take up as much space as
  needed. I did this by setting a flex of 1 to the Password Input.

- I changed the positioning of the show/hide button from absolute to
  relative.

- I ensured horizontal alignment by setting the flex-direction of
  the parent view to 'row'.

- To fix the problem of the changing width of the text input, when
  the show/hide text changes, I replaced the show/hide text with a
  show/icon. The show/hide icon is an eye-open/eye-closed icon. This
  icon always has a fixed width and does not affect the text input.

- I removed hide text from messages_en.json since it is not in the
  app.

I tested this on Android and IOS devices with different screen
sizes, and it works fine on both platforms.

Fixes: zulip#5614
Kirtishukla2004 added a commit to Kirtishukla2004/zulip-mobile that referenced this issue Mar 16, 2023
@Kirtishukla2004
The password text entry and Hide/Show button overlap for long passwords
f56d621 
zulip#5614

input type password can help this issue
@Kirtishukla2004 Kirtishukla2004 mentioned this issue Mar 16, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@KshitizSareen KshitizSareen

Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@nagisa @chrisbobbe @KshitizSareen