Category

Ionic

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

By | Ionic | No Comments

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
<ion-content overflow-scroll="true">
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 Keyboard Close Leaves Content Up

By | Ionic

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.

How to debug Unfortunatately [app name] has stopped

By | Ionic

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.

Debugging ionic android build error

By | Ionic

Navigate to platforms/android

in cmd (won’t work in git bash) run following command.

1
gradlew.bat --info build clean

This will precisely give you the error.

Source: https://stackoverflow.com/questions/30645900/ionic-build-android-failure-execution-failed-for-task-processdebugresources

mddialog hiding keyboard on iOS

By | Ionic
1
2
3
4
5
6
7
8
9
10
if(ionic.Platform.isIOS()){
    window.addEventListener('native.keyboardhide', keyboardHideHandler);
    window.addEventListener('native.keyboardshow', keyboardShowHandler);
    function keyboardHideHandler(e){
        $('.md-dialog-container').css('paddingBottom', 0);
    }
    function keyboardShowHandler(e) {
        $('.md-dialog-container').css('paddingBottom', e.keyboardHeight);
    }
}

Ionic Error

By | Ionic

The problem: platforms/android/build/intermediates/res/merged/debug/values-v26/values-v26.xml:15:21-54: AAPT: No resource found that matches the given name: attr ‘android:keyboardNavigationCluster’.

Platform: Android

Step 1: Make sure Android Studio & tools are up to date.

Android SDK build tools, Android SDK tools, Google Repository, Android SDK platform-tools and google play services need to be at at their latest version. May be you don’t need all of the mentioned items, some are optional but it’s not going to hurt to have it.

Step 2: Update cordova-android to 6.3.0

1
cordova platform update android@6.3.0

Or

1
cordova platform rm android
1
cordova platform add android@6.3.0

Step 3:

Try running

1
ionic run android

It’s going to download some stuff first. You may see this error: Execution failed for task ‘:transformClassesWithDexForDebug’.

In the file build.gradle located under platforms/android. Add this under android block -> default config block

multiDexEnabled true

Example: https://developer.android.com/studio/build/multidex.html#mdex-gradle 

Step 4:

Let’s try running one more time.

1
ionic run android
I got an error again. Error: Execution failed for task ':transformClassesWithJarMergingForDebug'.

Solution:

1
cordova plugin add cordova-google-api-version --variable GOOGLE_API_VERSION=11.4.0

The 11.4.0 from the above command can of course be some other version as well. Read more about what the above command does here: https://github.com/transistorsoft/cordova-google-api-version

Step 5:

Let’s try running one more time.

1
ionic run android

If it runs, awesome! However, on a different laptop I received another error: Error: Cannot find module ‘xml2js’.

Solution:

1
npm install xml2js

Step 6:

Let’s try running one more time.

1
ionic run android

What are the downside of using Ionic?

By | Ionic

Following article was wrote for Ionic 1.3.3.

I’m a big fan of Ionic but I wish I’d knew some of the downside of the framework prior I started with it.

Following are few issues that I came across while using the framework.

  1. There’s this cursor issue that just won’t be resolved. To be fair to Ionic this is not because of them, it’s a webkit bug but this bug is here to stay for as it appears a long time. If you have Ionic and you land up with similar situation there is no workaround for it.
  2. Using the popup in iOS has a very strong chances some part of your popup is going to be hidden behind the keyboard. Source. You can get around with this with custom coding but it really feels that this is something that Ionic guys should have done it in the first place.
  3. All the hybrid work is done by Cordova. Since it is an open source community and I greatly appreciate the guys who put in their time to develop the plugin, since they are being generous and putting their time but moreover they can’t spend the amount of time they wish they would. It would be great if someone supports them and that will motivate them to improve their work.In my opinion most of us developers want everything for free. The plugin developers are not supported and it results in a plugin that works but not upto the quality. Let’s just say that.

    If you are a Cordova plugin developer. I would like to say a big thanks to you for what you do.