Keyboard plugin over ion-list elements (does not add padding to content)

[Scobee]

Hello,

I am using this plugin on an Ionic 3 / Angular 5 project. I have:

scrollPadding: true,
scrollAssist: true

And also

<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
    <activity android:windowSoftInputMode="adjustPan" />
</edit-config>

My code looks like this:

<ion-content>
    <ion-grid no-padding>
        <ion-row align-items-center class="border--bottom--gray margin--bottom--10">
            <ion-col>
                <ion-searchbar class="app-searchbar" [placeholder]="'Search"
                    (ionChange)="loadUsers()" [debounce]="500" #textInput></ion-searchbar>
            </ion-col>
            <ion-col col-auto>
                <button ion-button color="blue" round outline class="width--30 height--30 padding--0" (click)="goToSelectUserType()">
                    <i class="adsicon-plus"></i>
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list *ngIf="!loadingService.isActive">
        <ion-item detail-none no-lines *ngFor="let user of users" (click)="select(user)">
            <ion-avatar item-left>
                <img [src]="user.prefAvatar ? user.prefAvatar : avatarPlaceholder" class="user-avatar">
            </ion-avatar>
            <button ion-button clear full>
                <div class="font__size--14">Name</div>
                <div class="font__size--12 margin--top--5">Type</div>
            </button>
        </ion-item>
    </ion-list>

    <ion-spinner *ngIf="loadingService.isActive"></ion-spinner>

    <div class="text__align--center margin--top--25" *ngIf="textInput.value.length < 3 && !users.length && !loadingService.isActive">
       Min 3 chars
    </div>
    <div class="text__align--center margin--top--25" *ngIf="textInput.value.lenght >= 3 && !users.length && !loadingService.isActive">
       No results
    </div>
</ion-content>

The problem is that no padding is added when the keyboard is open, although scrollPadding is set to true

[MarkDsantos]

Wondering if there is any fix for this?

[flobiwankenobi]

+1

[MarkDsantos]

Still an issue, need a fix for ionic 1 project.

[joshallison]

Try adding the below to your config.xml file

<widget xmlns:android="http://schemas.android.com/apk/res/android">
        <platform name="android">
            <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
                <activity android:windowSoftInputMode="adjustPan" />
            </edit-config>
        </platform>
   </widget>

[MarkDsantos]

sorry, but didn't work

[MarkDsantos]

I found a temporary hack/fix using javascript. When the keyboard opens if (document.querySelectorAll('ion-view.pane ion-content')[0] && platform == 'android') { document.querySelectorAll('ion-view.pane ion-content')[0].style.cssText = "height: calc(100vh - " + e.keyboardHeight + "pt);" document.activeElement.scrollIntoView();//if active input isn't focussed in view }

When the keyboard hides if (document.querySelectorAll('ion-view.pane ion-content')[0] && platform == 'android') { document.querySelectorAll('ion-view.pane ion-content')[0].style.cssText = "height: 100%);" }

[Scobee]

@mark261092 your fix is ok, but I dont really want to use hacks like this. I would like this to work just by using the config

[MarkDsantos]

@Scobee , yes, me too. this was a last resort measure that will be removed if something promising comes up.

[zhorwedel]

Anybody have a fix for this? I am also using a hack similar to @mark261092 but would like to find a cleaner solution.

[jcesarmobile]

Can you provide a sample app? Is not clear to me if this is a bug on the keyboard plugin or on Ionic itself.

[poimsm]

+1

[apolaina-ineat]

+1