Skip to content

Fix ios 12 black area when keyboard is showing and shrink param is true #85

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix ios 12 black area when keyboard is showing and shrink param is true #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe1811f
Fix ios 12 black area when keyboard is showing and shrink param is true
costin-moraru Jan 28, 2019
4d15850
fix versions
costin-moraru Dec 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ Shrink the WebView when the keyboard comes up.

Set to true to shrink the WebView when the keyboard comes up. The WebView shrinks instead of the viewport shrinking and the page scrollable. This applies to apps that position their elements relative to the bottom of the WebView. This is the default behaviour on Android, and makes a lot of sense when building apps as opposed to webpages.

**Fixed scroll the content to bottom when keyboard is showing and the shrinkview param is true. Work with meta viewport-fit=cover fix for iphone x.**

#### Supported Platforms

Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cordova-plugin-keyboard",
"version": "1.2.0",
"version": "1.2.3",
"description": "Cordova Keyboard Plugin",
"cordova": {
"id": "cordova-plugin-keyboard",
Expand All @@ -10,7 +10,7 @@
},
"repository": {
"type": "git",
"url": "https://github.com/cjpearson/cordova-plugin-keyboard.git"
"url": "https://github.com/costin-moraru/cordova-plugin-keyboard.git"
},
"keywords": [
"cordova",
Expand All @@ -28,7 +28,7 @@
"author": "Apache Software Foundation",
"license": "Apache 2.0",
"bugs": {
"url": "https://github.com/cjpearson/cordova-plugin-keyboard/issues"
"url": "https://github.com/costin-moraru/cordova-plugin-keyboard.git/issues"
},
"homepage": "https://github.com/cjpearson/cordova-plugin-keyboard#readme"
"homepage": "https://github.com/costin-moraru/cordova-plugin-keyboard.git#readme"
}
2 changes: 1 addition & 1 deletion plugin.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="cordova-plugin-keyboard" version="1.2.0">
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="cordova-plugin-keyboard" version="1.2.3">
<name>Keyboard</name>
<description>Cordova Keyboard Plugin</description>
<license>Apache 2.0</license>
Expand Down
32 changes: 26 additions & 6 deletions src/ios/CDVKeyboard.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ Licensed to the Apache Software Foundation (ASF) under one
@interface CDVKeyboard () <UIScrollViewDelegate>

@property (nonatomic, readwrite, assign) BOOL keyboardIsVisible;
@property (readwrite, assign) CGFloat keyboardHeight;

@end

Expand Down Expand Up @@ -193,10 +194,14 @@ - (void)shrinkViewKeyboardWillChangeFrame:(NSNotification*)notif
// Note: we check for _shrinkView at this point instead of the beginning of the method to handle
// the case where the user disabled shrinkView while the keyboard is showing.
// The webview should always be able to return to full size
_shrinkView = YES;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should not force this to YES. This overrides settings users have made.

CGRect keyboardIntersection = CGRectIntersection(screen, keyboard);
if (CGRectContainsRect(screen, keyboardIntersection) && !CGRectIsEmpty(keyboardIntersection) && _shrinkView && self.keyboardIsVisible) {
screen.size.height -= keyboardIntersection.size.height;
self.webView.scrollView.scrollEnabled = !self.disableScrollingInShrinkView;
self.keyboardHeight = keyboardIntersection.size.height;

// self.webView.scrollView.scrollEnabled = !self.disableScrollingInShrinkView;
self.webView.scrollView.scrollEnabled = NO;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should not force this toNO. That overrides the settings users have made.

}

// A view's frame is in its superview's coordinate system so we need to convert again
Expand All @@ -207,12 +212,24 @@ - (void)shrinkViewKeyboardWillChangeFrame:(NSNotification*)notif

- (void)scrollViewDidScroll:(UIScrollView*)scrollView
{
/*
Costin Moraru

On ios 12 with default cordova webview won't scroll webview content to bottom with bounds.
Used setContentOffset to scroll webview content to 0.0f.

*/
// if (_shrinkView && _keyboardIsVisible) {
// CGFloat maxY = scrollView.contentSize.height - scrollView.bounds.size.height;
// if (scrollView.bounds.origin.y > maxY) {
// scrollView.bounds = CGRectMake(scrollView.bounds.origin.x, maxY,
// scrollView.bounds.size.width, scrollView.bounds.size.height);
// }
// }
if (_shrinkView && _keyboardIsVisible) {
CGFloat maxY = scrollView.contentSize.height - scrollView.bounds.size.height;
if (scrollView.bounds.origin.y > maxY) {
scrollView.bounds = CGRectMake(scrollView.bounds.origin.x, maxY,
scrollView.bounds.size.width, scrollView.bounds.size.height);
}
// Scroll webview content to bottom
CGPoint bottomOffset = CGPointMake(0.0f, 0.0f);
[self.webView.scrollView setContentOffset:bottomOffset animated:NO];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works, but doesn't match expectations across the board. This scrollsToTop when the keyboard is opened. In some instances that means scrolling the input out of view.

}
}

Expand All @@ -227,6 +244,9 @@ - (void)shrinkView:(CDVInvokedUrlCommand*)command
}

self.shrinkView = [value boolValue];
// Scroll webview content to bottom
CGPoint bottomOffset = CGPointMake(0.0f, 0.0f);
[self.webView.scrollView setContentOffset:bottomOffset animated:NO];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function shrinkView is only meant to set the variable above. Should not make changes to the scrollView.

}

[self.commandDelegate sendPluginResult:[CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsBool:self.shrinkView]
Expand Down