Fix footer position on the login page in mobile View #6203

parasharrajat · 2021-11-04T01:33:51Z

Details

Fixed Issues

Tests | QA Steps

Open Login Page. The footer should be bottom aligned.
Focus on the email field, continue button and email input should be visible completely.
Click continue,
click to enter the password. Password input and continue button and go backlink should be over the keyboard.

Note: Wide Screen layout is fixed in separate issue and which affect web | desktop | Ipad | Tablet | landscape view and the PR for the same is #6137.

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

…iew above keyboard It is a little tricky to manage the various parts of UI above and below the keyboard together but:- - Created a Flex 1 container which will respect the position behaviour. - Now move all the styles to content of the keyboardAvoidView. - There is some sort of problem that keeps some part of view behind the keyboard. It could be some thing but I am not aware of so I tried various padding and it seem that 20px will be hidden behind the keyboard. - so I moved the margin from footer to this and added pb5.

luacmartins

The footer shifts up as soon as we start typing on Android. Maybe extending signInPageStyles.js/index.ios.js to include Android would fix this.

android.mov

parasharrajat · 2021-11-08T16:42:50Z

I will check it.

luacmartins · 2021-11-11T17:11:38Z

@parasharrajat let me know when this is ready for another review.

parasharrajat · 2021-11-11T18:25:39Z

Thanks. Just trying to find a way to trigger the ui update when keyboard opens which happens when you type on input.

Explicitly trigger the page layout update when keyboard shows to remove glitch

parasharrajat · 2021-11-11T21:45:35Z

@luacmartins Fixed it. Basically, when you type the LoginPage rerender but it does not when the keyboard is shown. So I created on HOC to trigger rerender when the keyboard becomes visible.

luacmartins · 2021-11-12T16:20:08Z

Hey @parasharrajat! I pulled the latest changes, but I still see the footer shifting up when the keyboard is displayed on Android. Maybe I'm missing something here. Can you double check please?

parasharrajat · 2021-11-12T16:21:40Z

Ok. Checking now. may be I missed something.

parasharrajat · 2021-11-12T16:35:30Z

@luacmartins It works on all of the three devices I tested.
Pixel 4 XL

output_file.mp4

Oops, you asked for footer placement.

Yeah, this is basically fine, I coded it this way. There is no issue with this unless the continue button does not show above the keyboard. It was really hard to achieve. we use adjustResize in Android which will move the whole view above the keyboard and resize the window on keyboardOpen. it means the whole scrollview including the footer will be placed on the top of the keyboard, pushing the main content off the screen. I am managed to keep the footer behind the keyboard so that only the main content is above the keyboard.

It satisfies both issues:

Footer placement should be bottom of the screen. (I don't think it really matters when it is shifted above when the keyboard is open).
Keep the main content above the keyboard. (If I will remove that behaviour, then the whole footer will go above the keyboard which I think will become another issue.)

luacmartins · 2021-11-15T17:51:37Z

I see... I dislike the layout shift, but I agree that that is a minor detail here. Approving.

OSBotify · 2021-11-15T17:52:38Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2021-11-15T21:21:09Z

🚀 Deployed to staging by @luacmartins in version: 1.1.14-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

ogumen · 2021-11-21T23:44:38Z

The accessibility issue related to the mWeb on Android:

There is no possibility to zoom the page content using pinch-to-zoom on Android devices (happens due to user-scalable attribute set to "no" in <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">, the iOS devices ignore this setting) - failure of WCAG SC 1.4.4
https://user-images.githubusercontent.com/88733897/142783792-a57a7363-3b36-4142-b146-b8864b576a11.mp4

OSBotify · 2021-11-22T20:10:18Z

🚀 Deployed to production by @AndrewGable in version: 1.1.15-15 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

rushatgabhane · 2022-01-12T06:24:52Z

src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js

@@ -0,0 +1,5 @@
+import styles from '../../../../styles/styles';
+
+const scrollViewContentContainerStyles = styles.flex1;


I'm curious why flex1 was used here for iOS? Replacing it with mnh100 doesn't break UI for iPhone, iPad or iPod
contd.. below

Not remember but I'm sure there was some UI thing. I will get back to you on this.

Cool, take your time. Thanks!

@rushatgabhane I looked into this one. I added this as minHeight: 100% makes the Login Page height become more than the screen height and thus page will become scrollable even if we have enough space to fit the whole content.

minHeight: 100% was added for Android, It is supposed to be flex1. Android does not work good with flex1.

welp, we made iOS use minHeight 100% in this PR #7205
This is the behaviour that we get after making the changes. It's same as using flex1 at least on the sim 😅

Screen.Recording.2022-01-16.at.1.50.17.AM.mov

Clear the cache and then run it. I don't remember but it i visible sometimes.

Thanks for your help. Yep, it's a problem only sometimes so missed it during review.

It's a regression. I'll comment in original issue.

rushatgabhane · 2022-01-12T06:25:25Z

src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js

@@ -0,0 +1,5 @@
+import styles from '../../../../styles/styles';
+
+const scrollViewContentContainerStyles = styles.mnh100;


mnh100 like here for rest of the platforms

rushatgabhane

@parasharrajat just have a question here for issue 7122

Fix footer position on the login page in mobile View

b5257f5

parasharrajat mentioned this pull request Nov 4, 2021

Android - Login - Keyboard overlaps with "Continue" button - Reported by: @rushatgabhane #6202

Closed

parasharrajat added 4 commits November 7, 2021 14:21

Pull latest changes from main

cb3b1ad

Fix IOS styles

26f4f65

UI fixes and props

72cada6

parasharrajat marked this pull request as ready for review November 7, 2021 19:47

parasharrajat requested a review from a team as a code owner November 7, 2021 19:47

botify requested a review from luacmartins November 7, 2021 19:47

MelvinBot removed the request for review from a team November 7, 2021 19:47

Fix: styles for mobile web

f02b60a

parasharrajat mentioned this pull request Nov 7, 2021

iPad - Sign in - Keyboard is covering the fields in Sign in page and password page in Landscape orientation #5159

Closed

stephanieelliott mentioned this pull request Nov 8, 2021

Login UI collapsed on landscape orientation in mobile - Reported by: @Santhosh-Sellavel #5919

Closed

luacmartins requested changes Nov 8, 2021

View reviewed changes

Pull new changes

244f19b

fix: login page styles

77ebc1f

Explicitly trigger the page layout update when keyboard shows to remove glitch

luacmartins approved these changes Nov 15, 2021

View reviewed changes

luacmartins merged commit 6313603 into Expensify:main Nov 15, 2021

OSBotify mentioned this pull request Nov 15, 2021

Deploy Checklist: New Expensify 2021-11-15 #6305

Closed

70 tasks

mvtglobally mentioned this pull request Nov 16, 2021

mWeb - 1.1.15-1 - Login - Continue button not visible when keyboard is opened #6325

Closed

botify mentioned this pull request Nov 22, 2021

[HOLD for payment 2021-11-29] Log in - Bottom footer is not bottom aligned - Reported by: @parasharrajat #6175

Closed

rushatgabhane reviewed Jan 12, 2022

View reviewed changes

teneeto mentioned this pull request Sep 26, 2023

chore: migrate withKeyaboardState class to function component #27415

Merged

59 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix footer position on the login page in mobile View #6203

Fix footer position on the login page in mobile View #6203

parasharrajat commented Nov 4, 2021 •

edited

Loading

luacmartins left a comment

parasharrajat commented Nov 8, 2021

luacmartins commented Nov 11, 2021

parasharrajat commented Nov 11, 2021

parasharrajat commented Nov 11, 2021

luacmartins commented Nov 12, 2021 •

edited

Loading

parasharrajat commented Nov 12, 2021

parasharrajat commented Nov 12, 2021 •

edited

Loading

luacmartins commented Nov 15, 2021

OSBotify commented Nov 15, 2021

OSBotify commented Nov 15, 2021

ogumen commented Nov 21, 2021

OSBotify commented Nov 22, 2021

rushatgabhane Jan 12, 2022 •

edited

Loading

parasharrajat Jan 12, 2022

rushatgabhane Jan 12, 2022

parasharrajat Jan 15, 2022 •

edited

Loading

rushatgabhane Jan 15, 2022

parasharrajat Jan 16, 2022

rushatgabhane Jan 16, 2022

rushatgabhane Jan 12, 2022 •

edited

Loading

rushatgabhane left a comment

		@@ -0,0 +1,5 @@
		import styles from '../../../../styles/styles';

		const scrollViewContentContainerStyles = styles.flex1;

Fix footer position on the login page in mobile View #6203

Fix footer position on the login page in mobile View #6203

Conversation

parasharrajat commented Nov 4, 2021 • edited Loading

Details

Fixed Issues

Tests | QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

luacmartins left a comment

Choose a reason for hiding this comment

parasharrajat commented Nov 8, 2021

luacmartins commented Nov 11, 2021

parasharrajat commented Nov 11, 2021

parasharrajat commented Nov 11, 2021

luacmartins commented Nov 12, 2021 • edited Loading

parasharrajat commented Nov 12, 2021

parasharrajat commented Nov 12, 2021 • edited Loading

luacmartins commented Nov 15, 2021

OSBotify commented Nov 15, 2021

OSBotify commented Nov 15, 2021

ogumen commented Nov 21, 2021

OSBotify commented Nov 22, 2021

rushatgabhane Jan 12, 2022 • edited Loading

Choose a reason for hiding this comment

parasharrajat Jan 12, 2022

Choose a reason for hiding this comment

rushatgabhane Jan 12, 2022

Choose a reason for hiding this comment

parasharrajat Jan 15, 2022 • edited Loading

Choose a reason for hiding this comment

rushatgabhane Jan 15, 2022

Choose a reason for hiding this comment

parasharrajat Jan 16, 2022

Choose a reason for hiding this comment

rushatgabhane Jan 16, 2022

Choose a reason for hiding this comment

rushatgabhane Jan 12, 2022 • edited Loading

Choose a reason for hiding this comment

rushatgabhane left a comment

Choose a reason for hiding this comment

parasharrajat commented Nov 4, 2021 •

edited

Loading

luacmartins commented Nov 12, 2021 •

edited

Loading

parasharrajat commented Nov 12, 2021 •

edited

Loading

rushatgabhane Jan 12, 2022 •

edited

Loading

parasharrajat Jan 15, 2022 •

edited

Loading

rushatgabhane Jan 12, 2022 •

edited

Loading