Ionic – A Weblog of Priyank Maniar

Ionic V1 (iOS): Input field hides behind footer when keyboard is open

priyankmaniar — Sun, 08 Dec 2019 08:56:26 +0000

To the last input field which was getting hidden behind the footer bar when the input was focused and the keyboard was opened. I simply added margin-bottom (~70px) to the last input field’s label (which contained the last input field).

Note: I later observed for other fields which are not at bottom. The footer does cover those input fields.

Ionic V1 footer, subheader jumping out of view (WkWebView iOS)

priyankmaniar — Sun, 17 Nov 2019 13:41:07 +0000

Following was observed on input focus (keyboard open) and then scrolling up / down with good speed and typing something (Ionic V1 WKWebView iOS):

sub-header was thrown out of view
Footer was appearing randomly anywhere on the page.
The content view scroll was restricted. I could only scroll in some parts of the page and the rest of the page was inaccessible. It was creating a bounce effect as if I touched the end of the page.
Touching anywhere on the content page fixed it but obviously a major issue.

Solution

1
2
3
4
5
6
7

// @source: https://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/

// App level across all devices
$ionicConfigProvider.scrolling.jsScrolling(false);

// Platform level across the entire app
$ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

Read more about the options provided by ion-content here.

That’s it. Overflow scroll did the trick for me.

Ionic V1: Show form accessory bar conditionally on iOS

priyankmaniar — Wed, 16 Oct 2019 04:36:30 +0000

With WKWebView having form accessory bar has problems with keyboard. However, for select dropdown it is essential to have that Done bar. The Done helps make the selection in iOS otherwise you need to tap on the select field itself that initiated the rolling box. Not many people knows about it. Here’s how you conditionally show form accessory bar only for select.

1
2
3
4
5
6
7
8
9
10
11

if (ionic.Platform.isIOS()) {

angular.element('body').on('touchstart focus', 'select', function (e) {
Keyboard.hideFormAccessoryBar(false);
});

angular.element('body').on('blur', 'select', function (e) {
Keyboard.hideFormAccessoryBar(true);
});

}

Ionic: Hitting back when keyboard is open creates space at bottom

priyankmaniar — Sun, 13 Oct 2019 12:40:54 +0000

Before the $ionicHistory.goBack(); I’m checking if the keyboard is open. If the keyboard is open, close it, wait for it to be closed and then do $ionicHistory.goBack().

This seems to be issue if the last / current view has resize mode set to ionic.

More about the keyboard:

https://github.com/ionic-team/cordova-plugin-ionic-keyboard

Ionic V1 Cursor Lost

priyankmaniar — Sat, 12 Oct 2019 22:56:33 +0000

Sometimes span inside label takes focus along with input. Sometimes first the input takes focus then it moves to span. This transition removes the focus from the input but the keyboard still stays open. What you type in won’t register.

Solution 1: Removing span resolves the issue.

Solution 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

if (document.activeElement.nodeName === 'SPAN') {

if (jQuery(document.activeElement).hasClass('input-label')) {
jQuery(document.activeElement).siblings().find('input').focus();
jQuery(document.activeElement).val(jQuery(document.activeElement).val());
}

}

// .focus is hocus-pocus. this is what does the trick (focus)
if (document.activeElement.nodeName === 'INPUT') {
jQuery(document.activeElement).val(jQuery(document.activeElement).val());
}

// Solves it for the feedback page.
if (document.activeElement.nodeName === 'TEXTAREA') {
if (!jQuery(document.activeElement).val()) {

jQuery(document.activeElement).val(" ");
setTimeout(function () {
jQuery(document.activeElement).val("");
}, 1)
} else {
jQuery(document.activeElement).val(jQuery(document.activeElement).val());
}
}

Ionic V1 Keyboard Close Leaves Content Up

priyankmaniar — Fri, 11 Oct 2019 18:16:21 +0000

I had a main chat area in center and a input box at bottom for sending message.

Following code did the trick for me.

1
2
3
4
5
6
7
8
9

// This prevents the issue of the unwanted space left below the messages after the keyboard is closed.
$timeout(function () {
$ionicScrollDelegate.scrollBottom(false);
// safety net
$timeout(function () {
// no animation since this is only a safety net
$ionicScrollDelegate.scrollBottom(false);
}, 350);
}, 350);

This was called on blur and on focus of the input and when the message was sent.

Also try


1
2
3
4
5
6
// https://trello.com/c/tqYMWkQt

// may require further timeout depending on the element taking focus. If it takes a bit later the blur should be after that.

document.activeElement.blur()

setTimeout(function(){

    document.activeElement.blur();

}, 800)

could not find google-services.json while looking in [src/nullnull/release, src/release/nullnull, src/nullnull, src/release, src/nullnullrelease]

priyankmaniar — Mon, 07 Oct 2019 08:00:52 +0000

Add the line in config.xml

1	src="google-services.json" target="app/google-services.json" />

How to git clone a private repository?

priyankmaniar — Mon, 12 Nov 2018 17:50:56 +0000

We expect that the repository would prompt you for entering details but sometimes it doesn’t.

Adding –nofetch has helped me get this issue resolved.

E.g.

1	sudo cordova prepare --nofetch

How to debug Unfortunatately [app name] has stopped

priyankmaniar — Fri, 18 May 2018 18:25:21 +0000

Most of the time it’s due to some cordova plugin issue. Identifying which one is the trick here.

We can do

1	adb logcat

This is going to return insanely verbose log output. When the app is about to fail and when it does, in that window lies the error.

You can do a quick search for fatal and the code around it should be the culprit. In my case there was only one fatal and it was pretty quick to find out the culprit.

Ionic Error: Execution failed for task ‘:transformDexArchiveWithExternalLibsDexMergerForDebug’.

priyankmaniar — Fri, 06 Apr 2018 03:57:10 +0000

This is a build error. Like all build error after some auto update it made it’s way in.

I was earlier using https://github.com/transistorsoft/cordova-google-api-version pinned to 11.2.0.

I deleted the above plugin and installed https://github.com/dpa99c/cordova-android-play-services-gradle-release didn’t pass any version and it works now.